📚 Redux Toolkit 设置教程

Redux Toolkit 教程

介绍

有人在 React 应用中实现 Redux 时感到犹豫吗？我总觉得一开始实现 Redux 太费劲，尤其是因为 Redux 有很多样板代码，我总是记不住所有的步骤。
幸运的是，现在有了 Redux Toolkit，解决了我们的这个难题。虽然 Redux Toolkit 简化了我们的工作，但我仍然记不住所有的步骤。我决定做一个简单的教程，作为我的笔记。

我脑子里的 Redux

我不会解释 Redux 本身的概念，但会提到有关 Redux 的重要点。

Redux 是一个全局状态
Redux 并不是每个项目都需要的。
如果您不想进行 props 钻研（将 props 传递得太深），则可能需要 Redux。
如果你仍然对 Redux 感到困惑，不妨想想 React 的状态。唯一的区别是你可以从任何地方访问状态。

每次听到 Redux，我总是会把它简化。记住这句话。

Redux 是一个全局状态

它本质上是一个 React 状态。如果你有一个 React 状态，你能做什么？你可以获取状态，也可以设置状态，对吧？



// Initial state
const [count, setCount] = useState(0);

// get state
console.log(count);

// set state
setCount(1);

只要记住get和set 的概念即可。在 Redux 中，我们可以认为get是selector，而set是。dispatch

如果您想深入学习，我建议阅读此文档。

尤其是这个插图。

执行

让我们直接进入精彩部分吧！

安装

您只需要两个 npm 包。



npm install @reduxjs/toolkit react-redux

创建 Redux Store

src/app/store.js



import { configureStore } from '@reduxjs/toolkit';

export default configureStore({
  reducer: {},
});

配置商店

我想稍微介绍一下配置存储。您可以在此处阅读文档。

configureStore 只接受一个参数，即一个Object，其名称为ConfigureStoreOptions。请再次注意我的代码片段。

ConfigureStoreOptions有几个属性（？表示可选）：

减速器
中间件？
开发者工具？
预加载状态？
增强剂？

我不会费尽心思解释所有东西，因为我没有这方面的经验。不过，最重要且最容易理解的是reducers，devToolspreloadedState

减速器（对象）

Reducers 属性是强制选项，我们将 Reducer 作为属性。属性名称与选择器相关。我稍后会解释。

devTools（布尔值）

Chrome和Firefox的 devTools 插件链接

这对于您的开发环境来说很重要。默认值为 true，因此您无需添加此属性。但是，您可能需要在生产环境中使用此属性。

preloadedState（对象）

preloadedState与 React state 中的初始值相同。如果需要设置初始值，可以将其放在此属性中。

将 Redux Store 添加到 App.js 父级

这使得您的整个应用程序都可以访问 Redux。

用包装您的<App />组件Provider并包含您最近创建的商店。



//...
import { Provider } from 'react-redux';
import store from './app/store';


// ...
  <Provider store={store}>
    <App />
  </Provider>
// ...

创建 Redux 状态切片

这里的主要思想是 Slice 将产生一个我们将用于调度的动作和一个我们将在 configureStore 中使用的 reducer。

src/features/todo/todoSlice.js



import { createSlice } from '@reduxjs/toolkit';

export const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      const todo = {
        id: uuid(),
        text: action.payload,
      };

      state.push(todo);
  },
});

// this is for dispatch
export const { addTodo } = todoSlice.actions;

// this is for configureStore
export default todoSlice.reducer;

这是实现 Redux 最复杂的部分。我假设你已经了解 Redux Reducer。使用 createSlice，我们不需要手动实现 Redux Reducer。但是，你需要记住一点。Redux Toolkit 的 createSlice 内置于Immer中。

当我们想要更新 React 状态时，我们无法改变状态。因此，我们需要创建全新的数据来更新状态。这与传统 Redux 中的范例相同。然而，Immer 让我们的工作更轻松。我们可以直接改变状态。请看我在addTodoReducer 函数中的示例。我没有返回任何内容，只是改变了状态。



addTodo: (state, action) => {
  const todo = {
    id: uuid(),
    text: action.payload,
  };

  // mutate the state
  state.push(todo);
}

改变状态并不是更新状态的唯一方法，我们还可以使用 Redux 不可变概念，即使用 return



addTodo: (state, action) => {
  const todo = {
    id: uuid(),
    text: action.payload,
  };

  // return a new data
  return [...state, todo];
}

您可以在此处阅读 Redux Toolkit 关于 Immer 的完整文档。

将切片 Reducer 添加到 Store



import { configureStore } from '@reduxjs/toolkit';
import todoReducer from '../features/todo/todoSlice';

export default configureStore({
  reducer: {
    todos: todoReducer,
  },
});

在 React 组件中实现 useSelector 和 useDispatch

useSelector

我之前提到过，如果你想获取状态，你会使用选择器。这就是访问 redux 状态的方法。



import React from 'react';
import { useSelector } from 'react-redux';

export default function Todos() {
  const todos = useSelector((state) => state.todos);
  // todos comes from the reducer attribute name 
  // in configureStore

  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span>{todo.text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}



export default configureStore({
  reducer: {
    todos: todosReducer,
    // state.todos comes from this attribute name
  },
});

使用Dispatch

最后，如果我们想要修改全局状态，我们需要使用Dispatch和我们已经在slice中创建的动作。



import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addTodo } from '../features/todos/todosSlice';

export default function AddTodo() {
  const [text, setText] = useState('');
  // initial the dispatch here
  const dispatch = useDispatch();

  const addTodoHandler = (event) => {
    event.preventDefault();
    // update the state here using addTodo action
    // action only receive one parameter, which is payload
    dispatch(addTodo(text));
    setText('');
  };

  return (
    <form onSubmit={addTodoHandler}>
      <input
        type='text'
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button>Add todo</button>
    </form>
  );
}