Question

我有一个基本的待办事项列表。 todo列表的todo输入字段有一个触发操作的onChange事件，并将event.target.value发送到reducer，并将用户键入的每个字符存储到store对象的属性中。

当用户提交表单时，我想获取之前通过onChange事件存储的数据，然后我想将它放在商店对象的新属性上。

如何获取先前从商店输入的数据并将其拉入另一个减速器？

在我见过的所有例子中，减速器都以＆＃34;初始状态＆＃34;开始。我不想要那个，我想要用户输入的先前状态。

下面是代码的CodeSandbox版本（出于某种原因，右边的橙色 - 米色标签需要切换到左边的蓝色才能呈现表单。如果你不这样做，它会赢得＆＃39; t work）。

Answer 1

问问自己是否正确构建了减速器。如果一个和b不是彼此独立的，为什么它们是分开的减速器？

如果我们谈论正确构造reducer，todoList和export const a = combineReducers({ cachInput, newTodo });应该存在于单个reducer中。无需创建另一个减速器。此外，我猜您需要一次性获取输入值（当用户点击提交时）并将其发送到商店。

如果您仍想创建单独的缩减器，那么您可以按照以下方法进行操作：

回答如何访问或共享已存储在Reducer内的数据？

请勿使用combineReducers。

示例

替换此代码

export default (state = {}, action) => { return { cachInput: cachInput(state.app, action, state), newTodo: newTodo(state.posts, action, state), }; };

与

const reducer = (state = initialState, action, root) => {....}

reducer就像

root

您可以从{{1}}
访问之前的状态

Answer 2

onChange事件，触发操作并将event.target.value发送到reducer并将用户键入的每个字符存储到商店对象的属性

实际上，考虑到您提交表单以将相同的数据发送给Reducer，这不是正确的方法redux->action->reducers->store。

如果你没有很好地处理redux#connect，这将导致与shouldComponentUpdate /componetWillRecieve/getDerivedStateFromProps连接的组件不必要的渲染

而是将您键入的每个字符/字符串存储在组件state中，并在用户提交后，dispatch action将字符串/字符传递给{{1} }。

Answer 3

您为每个reducer使用两个不同的状态（或者说initialState）。因此，一个对象的更新不会反映在另一个对象中。

你需要为两个reducer使用共享的initialState，你的问题就解决了。

您可以将initialState保存在不同的文件中，并且可以导入两个reducers。

考虑下面的代码示例：

1.InitialState.js

export default initialState = {
  todoList: [
    { text: "fake todo" },
    { text: "fake todo" },
    { text: "fake todo" }
  ],
  cachedInput: ""
};

2.现在CachDataOfTodoInput.js

import initialState from "InitialState";

export function cachInput(state = initialState, action)

3.Same in SubmitDataToTodo.js

import initialState from "InitialState";
export function submitNewTodo(state = initialState, action)

因此inforeState在您的Reducer之间共享，您将能够访问每个reducer中的数据。

Answer 4

如果要使用包含以前缓存数据的初始状态加载应用程序，并且如果使用客户端呈现，则可以将redux存储中的缓存数据插入本地存储并将其用作初始状态。

如果您只想在表单提交后将数据导入到其他reducer，您可以使用redux-thunk。它允许您在提交操作中加载当前状态，并将捕获值传递到另一个reducer并存储它们。

如果您正在使用ssr而您希望在服务器上加载数据，则除非在服务器上保存数据（在文件或数据库中），否则在服务器上收到请求时读取数据并更新您的redux存储。它会在您的应用中加载数据。

React Redux：如何在Reducer之间共享数据？

4 个答案: