Question

我基本上试图创建一个包含大量页面的反应webapp。每个页面的数据都通过不同的API调用加载。大多数响应都有相互依赖的信息。我决定使用redux来存储这些响应并从每个组件访问。

这是我的reducer文件的样子，

var initialState = {
      "userDetails": [],
      "userPicks": []
    };

module.exports = function(state, action, data) {
  state = state || initialState;
  switch (action.type) {
    case 'ADD_USER_LIST':
      return Object.assign({}, state, {
        "userDetails": action.data
      })

    case 'ADD_USER_PICK_LIST':
      return Object.assign({}, state, {
        "userPicks": action.data
      })

    case 'UPDATE_SELECTION':
      return Object.assign({}, state, {
        return "do something"
      });

    default:
      return state
  }
}

所以我用

var redux = require('redux'); var reducers = require('./reducers'); var store = redux.createStore(reducers);

在使用商店信息的每个组件的顶部。

store.getState()

但是此过程始终将我的reducer状态重置为初始状态，并且应用程序丢失所有数据。任何人都可以指出我错在哪里以及我应该注意什么？

Answer 1

“任何人都可以指出我错在哪里”你正在为每种组件类型创建新的商店。您需要使其成为一个单独的模块，并为每个应用程序创建一次存储。

// redux/store js
var redux = require('redux');
var reducers = require('./reducers');
module.exports = redux.createStore(reducers);

“我应该注意什么”你应该看一下redux的官方反应绑定。 React Redux

// app.js
var store = require('./redux/store.js');
var Provider = require('react-redux').Provider

ReactDOM.render(
 (<Provider store={store}>
     <App />
  </Provider
 ), mountingPoint)

Answer 2

您必须在顶级应用中创建一次redux store

var redux = require('redux');
var reducers = require('./reducers');
var store = redux.createStore(reducers);

不要为每个组件创建。使用容器组件mapStatetoProps和mapDispatchToProps并将props传递给组件

Reactjs + redux：在不同组件之间共享Reducer

2 个答案: