Redux （集中式的状态管理工具）

流程 ： 仓库() -> 仓库中有很多的切片对象 (也就是单个数据) -> 每个数据都有无数的方法

redux三个核心概念

• 1、store 存储一些公共的状态 ， 项目中只能有一个store仓库 ， 是和组件通讯的桥梁
• 2、action 描述一个行为 / 动作 ，（对数据进行具体的操作），值是一个对象 { type ：”类型” ，payload ：”要更新的数据”}
• 3、reducer 是一个函数 ，接收 state 和 actiion ， 计算返回新的 state

安装

npm i @reduxjs/toolkit --force

使用

    // 1.  导入
    //  createSlice创建 切片对象
    //  configureStore  创建 store 对象
    import { createSlice,configureStore } from "@reduxjs/toolkit"


    
// 2. 创建切片对象
let countSlice  = createSlice({
    //数据别名 
    name:"count",
    //为数据赋值,推荐值为对象
    initialState:{
        value:100
    },
     // action 描述一个行为/动作。值为一个对象 {type:"类型",payload:"要操作的新的数据" }
    // {  type:"打",payload:"张三"  }  {type:"打",payload:"酱油"}  {type:"学习",payload:"react"}
    // {type:"incre",payload:1}    {type:"decre",payload:2}
    // 配置 reducers 函数 也是 创建 action 函数
    reducers:{
        //加
        incre:function(state,action){
            //  必须对数据进行直接更改
            state.value += action.payload;
        },
        //减
        decre(state,{payload}){
             //  必须对数据进行直接更改
             state.value -= payload;
        }
    }
  
});


    // 3. 提取action 方法
    let { incre , decre} = countSlice.actions;


    // 4. 创建仓库
    let store = configureStore({
        reducer:countSlice.reducer
    });


    
    // 5. 读取仓库数据
    console.log(store.getState());

    // 6. 调用action 方法
    store.dispatch(incre(1));

store(仓库)中的方法

• store.getState() 读取store 数据
• store.dispatch() 分发行为/动作
• store.subscribe() 订阅 store中的数据，当store 中的数据发生变化时，自动调用。

store.dispatch()

dispatch() 参数为对象 同步更新数据

  //  分发行为
    store.dispatch({type:"incre",payload:1});
    store.dispatch({type:"decre",payload:2});

    // 在老版  
    //封装 action 函数 返回 action 对象
    //封装加方法
    function incre(payload){
        return {type:"incre",payload};
    }

    //封装减方法
    function decre(payload){
        return {type:"decre",payload};
    }


    // 分发行为
    store.dispatch(incre(1));
    store.dispatch(decre(2));

dispatch() 参数为函数 异步更新数据

   //调用store方法
        store.dispatch(() =>{
            setTimeout(() => {
                // 调用同步方法更新数据
                store.dispatch(incre(payload));
            }, 3000);
            
        });



    //在store 中封装方法
    //创建异步加方法
    export let asyncIncre  = (payload) =>{
        return () =>{
            setTimeout(() => {
                // 调用同步方法更新数据
                store.dispatch(incre(payload));
            }, 3000);
            
        }
    }

    // 在组件中调用异步方法
 store.dispatch(asyncIncre(3));

封装reducer

在 store 下创建 slices 目录 及 countSlice.js 文件

  // 导入
    import {createSlice} from "@reduxjs/toolkit"

// 创建切片对象
let countSlice  = createSlice({
    //数据别名 
    name:"count",
    //为数据赋值,推荐值为对象
    initialState:{
        value:100
    },
  
    // action 描述一个行为/动作。值为一个对象 {type:"类型",payload:"要操作的新的数据" }
    // {  type:"打",payload:"张三"  }  {type:"打",payload:"酱油"}  {type:"学习",payload:"react"}
    // {type:"incre",payload:1}    {type:"decre",payload:2}


    //   配置 reducer 函数，也在创建 action 函数
    reducers:{
        //加
        incre:function(state,action){
            //  必须对数据进行直接更改
            state.value += action.payload;
        },
        //减
        decre(state,{payload}){
             //  必须对数据进行直接更改
             state.value -= payload;
        }
    }
});


//  提取action 方法
export let { incre , decre} = countSlice.actions;



//创建异步加方法
export let asyncIncre  = (payload) =>{
    return dispatch =>{
        setTimeout(() => {
            // 调用同步方法更新数据
            dispatch(incre(payload));
        }, 1000);
        
    }
}

//创建异步减方法
export let asyncDecre = (payload) =>{
    return dispatch =>{
        setTimeout( () => {
            // 调用同步方法更新数据
            dispatch(decre(payload));
        }, 1000);
    }
}

//暴露
export default countSlice.reducer

在 store index.js 中导入并使用

    
//  configureStore  创建 store 对象
import { configureStore } from "@reduxjs/toolkit"

import countReducer from "./slices/countSlice";


// 4. 创建仓库
let store = configureStore({
    reducer:countReducer
});



//暴露store
export default store;

react-redux

安装

npm i react-redux --force

导入

 // 1. 在 项目的入口文件
    import {Provider} from "react-redux"
    // 2. 将所有的组件 包裹在 Provider 组件中并传递store 数据
    //渲染
    ReactDOM.render(<Provider store={store}><BrowserRouter><App/></BrowserRouter></Provider>,document.getElementById('root'));


    // 3. 在对应的组件中导入 两个hook
    import {useSelector,useDispatch} from "react-redux"
     //useSelector  hook  获取到 store 仓库中的所有的状态
      // useDispatch 能获取 到 dispatch 函数


    // 4. 在函数式组件的内部 使用  useSelecter 来获取 store 所有 的数据
    // 1. 形式
    // let state = useSelector(state => state);

    // 2. 形式
    let {count,zan} = useSelector(state => state);

    // 3. 形式
    // let count = useSelector(state => state.count);

    // 5. 直接使用数据
     <h1> store中的数据是：{count.value}</h1>
      <h1>当前点赞数：{zan.value}  </h1>

    // 6. 使用useDispatch 能获取 到 dispatch 函数
    let dispatch = useDispatch();

    // 7. 调用 store 中的action 方法来更新数据
     //加
    let add = () => {
        dispatch(incre(1));
       

    }


    //减操作
    let sub = () => {
        // 调用store 中的 decre 方法
        dispatch(decre(2));

       
    }

    //异步加
    let asyncAdd = () => {
        //调用store方法
        dispatch(asyncIncre(3));
       
    }

    //异步jian 
    let asyncSub = () => {
        //调用store方法
        dispatch(asyncDecre(4));

      
    }