Reactjs 如何将更改的状态发送到react native中的组件？

我是react&react native的初学者。 我用的是react 16，react thunk，react redux

我正在尝试获取已从

firestore

创建的类别。 首先，我使用

connect（）

调用

action

，然后，我使用thunk键入

action

，还从

firestore

获取数据。 最后，我在reducer中返回了新的状态。 当然，我不知道redux过程，所以请给出一些提示

这是我的密码。多谢各位

CategoryImageList.js（组件）

CategoryReducers.js（减速器）

。。。
常量类别初始状态={
姓名：[]，
imgName:[]
}
导出常量CategoryReducer=（状态=categoryInitialState，操作）=>{
开关（动作类型）{
案例类别：
控制台日志（操作）；
返回{…状态，类别：{
名称：action.payload.name，
imgName:action.payload.imgName
}};
违约：
返回状态；
}
}

App.js

...
type Props = {};
export default class App extends Component<Props> {
    render() {
        const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
        return (
        <Provider store={store}>
            <View style={{flex:1}}>
                <Header headerText={'FoodUp'}/>
                <CategoryImageList />
            </View>
        </Provider>
    );
  }
}

已更新 Firebase.js

---

mapStateToProps将存储状态作为参数/param（由react redux:：connect提供），并用于将组件与存储状态的特定部分链接。在您的情况下，您可以这样使用。您可以在组件中使用name、imgName作为道具

const mapStateToProps = ({categories}) => {
    const { name, imgName } = categories;
    return {name, imgName};
};
export default connect(mapStateToProps, {getCategory})(CategoryImageList);

---

您必须将mapstateToProps添加到您的connect-like

const mapStateToProps = (state: any) => {
  return {
    name: state.categories.name,
    imageName:state.categories.imageName
  };
}

export default connect(mapStateToProps)(CategoryImageList)

然后，您将能够访问名称和图像名称，如，

this.props.name

和

this.props.imageName

编辑：要分派

GET_CATEGORY

，您可以使用mapDispatchToProps，也可以从组件内部执行getCategory和分派，如

import {getCategory} from './category'

 componentWillMount() {
    this.props.getCategory(this.props.dispatch);
  }

并将getCategory函数更改为

export const getCategory = (dispatch) => {
...
dispatch({ type: GET_CATEGORY, payload: test} );
...
}

---

您需要将存储映射到您的组件，以便它可以访问存储数据。然后可以使用组件中的this.props.data访问存储。谢谢你的回复！我更新了我的帖子。我的商店叫什么名字？我这样写，

createStore（reducers，{}，applyMiddleware（ReduxThunk）

@MingyuJeon

createStore（reducers，{}，applyMiddleware（ReduxThunk）中的
reducers是什么
？在
reducers
文件中，你可以看到你所有的reducer名称。如果你的商店是这样的，就没有商店名称。你只有reducer\u名称。你也可以发布
reducers
文件吗？我更新了我的帖子。我不知道如何调用action。可以使用
connect（MapStateTrops，{getCategory}（CategoryImage）；
getCategory`是reducer中的一个函数。@MingyuJeon我已经更新了我的答案。reducer名称是
categories
我收到了这个错误。
不变冲突：CategoryImageList（…）：render未返回任何内容。这通常意味着缺少返回语句。或者，若要不呈现任何内容，请返回null。
这是因为我在
render（）
中未返回任何内容吗？那么我应该返回什么？您好，谢谢您的回复。我想我的操作文件（category.js）从未调用过。因此，状态为
{imgName:[]，name:[]}
因为reducer的初始化。我不知道如何在
CategoryImageList.js
组件中调用操作。我已经编辑了答案，以包括对
CategoryImageList.js
组件状态的每个属性的答案
未定义的
。我认为这是因为
操作。有效负载
是
数组
。在这种情况下，我如何返回状态？请发布
getCategories（）
，因为我猜这是一个从未被调用过的承诺调用。这是在
category.js
中。我认为它返回未定义状态的原因是
操作。有效负载
是
数组的类型。
const mapStateToProps = (state: any) => {
  return {
    name: state.categories.name,
    imageName:state.categories.imageName
  };
}

export default connect(mapStateToProps)(CategoryImageList)

import {getCategory} from './category'

 componentWillMount() {
    this.props.getCategory(this.props.dispatch);
  }

export const getCategory = (dispatch) => {
...
dispatch({ type: GET_CATEGORY, payload: test} );
...
}