了解 React-Redux 工具包语法？

Question

我是 React、redux 的新手，很想了解我遵循的 redux-toolkit 教程。我的切片如下。

const initialState = {
  count: 0,
};

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
  },
});

export const { increment } = counterSlice.actions;

export default counterSlice.reducer;

export const incrementTest = () => (dispatch) => {
  dispatch(increment());
};

然后我使用 incrementTest 操作如下

<button onClick={() => dispatch(incrementTest())}> + </button>

我想了解以下

在接下来的功能中

export const incrementTest = () => (dispatch) => {
      dispatch(increment());
    };

我们 return 一个将参数作为 dispatch 的函数，然后使用上面定义并导出的另一个函数 increment 的参数调用提供的 dispatch 函数。

然而，当我们调用此函数时，我们使用 dispatch(incrementTest()) 提供 incrementTest 作为 dispatch 的参数。我不明白这个概念。我应该进一步研究 javascript 中的哪个概念来学习这个？

此外，increment reducer 将 state 作为参数（在某些情况下 action 也是如此）。谁将此 (state,action) 提供给我们称之为 dispatch(incrementTest())

的函数

Answer 1

在Redux-Toolkit中，createSlice方法帮助我们创建了redux-store的一片。此功能旨在减少以规范方式将数据添加到 redux 所需的样板文件。在内部，它使用 createAction 和 createReducer.

createSlice 查看在 reducers 字段中定义的所有函数，并为每种情况生成一个使用 reducer 名称作为动作类型本身的动作创建器。

在上面的代码中，上面创建的 increment reducer 变成了 counter/increment 的 action 类型，increment() action creator 将 return 该类型的 action。

现在 createSlice 中的 reducers 对象中的所有 reducer 都可以访问 state，您还可以从那里操作 state。

Answer 2

所以这个：

export const incrementTest = () => (dispatch) => {
  dispatch(increment());
};

是一个 thunk 的例子，一个函数被调用（由 redux 中间件）有两个参数，dispatch 和 getState。它通常用于协调异步工作，因为您可以 await 函数内部的东西或处理承诺。如果您想了解更多信息，请查找 thunk 中间件。我不确定他们为什么把这个动作做成一个 thunk，没有必要，也许是测试。

关于你的第二个问题，图书馆有。你所做的就是用一个动作调用 dispatch()，库用当前状态和你的动作调用 reducer 函数。将其视为发出事件。您的工作是创建事件，库负责相应地更新全局状态。减速器是以声明方式编写的，有点。如“如果那个特定事件发生，全局状态需要如何改变？”。

了解 React-Redux 工具包语法？

Understand React-Redux Toolkit Syntax?

javascript

reactjs

redux

redux-toolkit