javascript - Reactjs + redux : Sharing reducers across different components

Question

我基本上是在尝试创建一个包含很多页面的 React Web 应用程序。每个页面的数据是通过不同的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 reducer = 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 绑定(bind)。 React Redux .

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

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