如何在 redux 中的 reducer 之间共享状态（如何组织 redux）？

Question

我学习使用 redux 做出反应，但不明白如何在 reducer 中使用状态属性 我在 /reducers 文件夹中创建了 reducers 文件

reducersText.js

export const textReducer = (state = [], action) => {
 switch (action.type) {
     case 'ADD_TEXT':
         return state = action.payload;
     default:
         return state;
 }
}
export const addCustomMinusWordReducer = (state = [], action) => {
 switch (action.type) {
     case 'ADD_CUSTOM_MINUS_WORD':
         return state = action.payload;
     default:
         return state;
 }
}

然后我在 /reducers 文件夹中创建 index.js

import {textReducer, addCustomMinusWordReducer} from "./text"
import {combineReducers} from "redux"

const allReducers = combineReducers({
    text: textReducer,
    customMinusWords: addCustomMinusWordReducer
})

export default allReducers

我的问题是我无法访问在textReducer 内部addCustomMinusWordReducer 中创建的text 状态。 我找到了相关的link，但这不是我要找的。 如何在减速器中使用状态？ 谢谢！

Answer 1

来自redux官方文档here。

很多用户后来想尝试在两个reducer之间共享数据，但是发现combineReducers不允许他们这样做。有几种方法可以使用：

• 如果 reducer 需要了解来自另一个状态切片的数据，则可能需要重新组织状态树形状，以便单个 reducer 处理更多数据。

• 您可能需要编写一些自定义函数来处理其中一些操作。这可能需要用您自己的顶级 reducer 函数替换 combineReducers。您还可以使用 reduce-reducers 等实用程序来运行 combineReducers 来处理大多数操作，还可以为跨状态切片的特定操作运行更专业的 reducer。

• redux-thunk 等异步操作创建者可以通过 getState() 访问整个状态。动作创建者可以从状态中检索额外的数据并将其放入动作中，以便每个 reducer 都有足够的信息来更新自己的状态切片。

所以，通过完全使用您的方法而不使用 redux-thunk 并且不使用父级 reducer 重新排序状态。你可以做的是从动作创建者那里传递状态。

例如； 一个动作创建者是：

 const ExampleComponent = ({ text, clicked }) => {
    return (
       <button onClick={() => clicked(text)} />
    );
 };

 export default connect(state => ({ 
   text: state.text 
 }, dispatch => ({
   clicked: (textState) => dispatch({ type: 'ADD_CUSTOM_MINUS_WORD', textState })
 })(ExampleComponent);

然后在reducer中你可以简单地做；

export const addCustomMinusWordReducer = (state = [], action) => {
 // action.textState will contain the data from textState
 // do something with action.textState
 const { textState } = action;
}

如果您真的想在减速器中使用全局状态，就像文档建议的那样，简单的方法是使用诸如reduce-reducers 之类的实用程序。您可以使用reduceReducers，而不是使用combineReducers。而在 reducer 中，状态对象将包含全局状态，而不是 combineReducer 给出的本地状态。

PS：

正如之前的回答所暗示的，在 reducer 中更改状态是一个坏主意，这可能会导致难以修复应用程序中的错误。

所以，与state = state.payload 相比，更好的主意是使用像state = { ...state, ...state.payload } 这样的扩展运算符，然后将更改附加到状态而不是直接设置它。