redux toolkit

介绍：Redux Toolkit 是我们官方推荐的编写 Redux 逻辑的方法。它围绕 Redux 核心，并包含我们认为对于构建 Redux 应用必不可少的软件包和功能。Redux Toolkit 建立在我们建议的最佳实践中，简化了大多数 Redux 任务，防止了常见错误，并使编写 Redux 应用程序更加容易。

可以先了解redux基础部分和Flux架构 redux基础部分

本篇主要介绍redux toolkit的基础使用

• 使用configureStore创建 Redux store

  • configureStore 接受 reducer 函数作为命名参数

  • configureStore 使用的好用的默认设置自动设置 store

• 为 React 应用程序组件提供 Redux store

  • 使用 React-Redux <Provider> 组件包裹你的 <App />

  • 传递 Redux store 如 <Provider store={store}>

• 使用 createSlice 创建 Redux "slice" reducer

  • 使用字符串名称、初始状态和命名的 reducers 函数调用“createSlice”

  • Reducer 函数可以使用 Immer 来“改变”状态

  • 导出生成的 slice reducer 和 action creators

• 在 React 组件中使用 React-Redux useSelector/useDispatch 钩子

  • 使用 useSelector 钩子从 store 中读取数据

  • 使用 useDispatch 钩子获取 dispatch 函数，并根据需要 dispatch actions

安装

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

（下面案例的项目创建create-react-app集成ts）详见项目搭建基本流程

1、创建状态管理器

import { configureStore } from '@reduxjs/toolkit'


const store = configureStore({
    reducer:{
        ...

    }
})

export default store

2、创建分模块切片

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

export const homeSlice = createSlice({
    name: 'home',
    initialState: {
        bannerList: [],
        proList: []
    },
    reducers: {
        changeBannerList(state,action:any) {
            state.bannerList = action.payload
            console.log(state.bannerList)
        },
        changeProList(state,action:any) {
            state.proList = action.payload
        }
    }
})

console.log('home',homeSlice)

export const { changeBannerList,changeProList } = homeSlice.actions

export default homeSlice.reducer

3、整合切片

import { configureStore } from '@reduxjs/toolkit'
import home from './module/home'

const store = configureStore({
    reducer:{
        home,

    }
})

export default store

4、入口文件配置状态管理器

import React from 'react';
import ReactDOM from 'react-dom/client';
import '@/index.scss';
import App from '@/App';
import store from './store-rtk/index';
import { Provider } from 'react-redux';

import reportWebVitals from '@/reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);



root.render(
  <React.StrictMode>
    <Provider store={ store }>
    <App />
    </Provider>
  </React.StrictMode>
);
// 

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

5、组件中使用状态管理器

import React, { FC, useEffect } from 'react';
import { useSelector,useDispatch } from 'react-redux'
import { changeBannerList,changeProList } from '../store-rtk/module/home'

interface IHomeProps {
    
};

const Home:FC<IHomeProps> = ({}) => {
    const bannerList = useSelector(state => (state as any).home.bannerList)
    const proList = useSelector(state => (state as any).home.proList)
    const dispatch = useDispatch()
    
    useEffect(() => {
         dispatch(changeBannerList(['http://www.1221wh.top/image/1.jpg','http://www.1221wh.top/image/2.jpg']))
        dispatch(changeProList(['我是一个好人','uio']))
    },[dispatch])

    return (
        <div>
            <h1>Home</h1>
            {
                bannerList && bannerList.map((item: string | undefined) => {
                    return (
                        <img src={item} alt="" style={ {height:100} } key={item}/>
                    )
                })
                
            }
            {
                proList && proList.map((item: any) => {
                    return (
                        <span key={ item }>{ item }</span>
                    )
                })
            }
        </div>
    )
};

export default Home;

记得App.tsx中要引入你的组件噢

效果如下