Question

我学会了对redux的反应，但不明白如何使用化简器中的状态属性我在/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

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

Answer 1

摘自redux here的官方文档。

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

如果精简器需要从另一个状态片中了解数据，则可能需要重组状态树形状，以便单个精简器可以处理更多数据。

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

异步动作创建者（例如redux-thunk）可以通过getState（）来访问整个状态。动作创建者可以从状态中检索其他数据并将其放入动作中，以便每个化简器具有足够的信息来更新其自己的状态切片。

因此，通过完全使用您的方法而不使用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;
}

如果您实际上想在reducers中使用全局状态，就像文档中建议的那样，简单的方法就是使用诸如reduce-reducers之类的实用程序。您可以使用combineReducers而不是使用reduceReducers。并且在化简器中，状态对象将包含全局状态，而不是CombineReducer会给出的局部状态。

PS：

如先前的回答所建议，在reducers内更改状态是一个坏主意，这可能会导致难以修复应用程序中的错误。

因此，代替state = state.payload更好的主意是使用像state = { ...state, ...state.payload }这样的散布运算符，然后将更改附加到状态而不是直接设置。

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

1 个答案: