使用 Redux Toolkit 简化 Redux 开发

前言

Redux Toolkit 是 Redux 官方提供的一个工具集，旨在简化和改进 Redux 的开发体验。使用这个工具集，开发者可以更轻松地编写 Redux 代码并减少样板代码，从而提高开发效率。本文将为你提供一个快速入门指南，介绍如何使用 Redux Toolkit。

使用方式

1.安装依赖
首先，我们需要安装 Redux Toolkit 和 React-Redux 依赖：

npm install @reduxjs/toolkit react-redux

2.创建 Redux Store
Redux Store 是存储整个应用状态的容器。使用 configureStore，我们可以轻松地创建 Store。

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
    reducer: {}
});

export default store;

3.创建 Redux State Slice
在 Redux Toolkit 中，我们可以使用 createSlice 方法来创建一个包含 reducer 和 actions 的 “slice”。

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
    name: 'counter',
    initialState: {
        value: 0
    },
    reducers: {
        increment: state => {
            state.value += 1
        },
        decrement: state => {
            state.value -= 1
        },
        incrementByAmount: (state, action) => {
            state.value += action.payload
        }
    }
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

4.将 Slice Reducers 添加到 Store 中
现在，我们需要将创建的 reducer 添加到 Store 中。

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'

const store = configureStore({
    reducer: {
        counter: counterReducer
    }
});

export default store;

5. 在 React 组件中使用 Redux 状态和操作
首先，我们需要使用 <Provider> 包裹我们的主 <App> 组件，这样 React 组件就可以访问到 Redux Store 了。

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

接下来，在我们的 React Functional Component 中使用 Redux。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function Demo() {
    const count = useSelector(state => state.counter.value);
    const dispatch = useDispatch();

    return (
        <div>
            <button aria-label="Increment value" onClick={() => dispatch(increment())}>
                Increment
            </button>
            <span>{count}</span>
            <button aria-label="Decrement value" onClick={() => dispatch(decrement())}>
                Decrement
            </button>
        </div>
    );
}

export default Demo;

至此，我们已经成功地使用 Redux Toolkit 设置了 Redux 并在 React 组件中使用了它。希望这篇指南对你的 Redux 开发有所帮助！