最高效的redux开发工具集--redux toolkit 看了秒懂的使用笔记

redux Toolkit优势背景：
       简化最常见场景下的Redux开发，包括配置store、定义reducer， 不可变的更新逻辑、甚至可以立即创建整个状态的“切片slice”，而无需手动编写任何action creator 或者 action type。

使用方法：
1.安装指令

 npm install @reduxjs/toolkit react-redux 

或者：

 yarn add @reduxjs/toolkit react-redux

2.创建store：
configureStore函数作用：
包装createStore以提供简化的配置选项和良好的默认预设；
自动组合切片reducers；

import {configureStore} from '@reduxjs/toolkit'
import ToDoReducer from './toDoReducer';
import thunkMiddleware from 'redux-thunk’;

const middlewares = [thunkMiddleware]；
const store = configureStore({
        reducer: {
            create: createReducer，
                        //注意此处索引为name 后为引入的reducer
               toDo:toDoReducer
        },
    middleware: middlewares
})
export default store

创建toDoReducer.js
createSlice函数作用：可生成分片reducer

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

const {actions,reducer:ToDoReducer} = createSlice({
        name:"toDo",
        initialState:{
        num:100
       },
reducers:{
    addToDo(state,action){
    const {payload = 0} = action
    state.num += payload;
    }
  }
})

export const createNum = state => state.toDo
export const {addToDo} = actions;
export default ToDoReducer;

在App.js中 绑定store到外层

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
import { Provider} from 'react-redux';
import store from './stores'

import Redux_tokit from './redux_tokit';
import Js_xlyIndex from './js_xly/Example/Js_xlyIndex';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

<Router>
    <Provider store={store}>
        <Switch>
            <Route path={"/redux_tokit"} component={Redux_tokit} />
            <Route path={"/js_xlyIndex"} component={Js_xlyIndex} />
        </Switch>
    </Provider>

在页面中使用：

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {createNum, addToDo } from '../stores/toDoReducer';
import { Button, Input } from 'antd';

const Redux_tokit = () => {
        const dispatch = useDispatch();
        const {num} = useSelector(createNum); //取出store中存的值

const handleClick = ()=>{
    dispatch(addToDo(10))  //调用dispatch修改store中的值
 }
return <>
    <Input value={num} />
    <Button onClick={handleClick} >点击点击</Button>
</>;
};
export default Redux_tokit;