redux-thunk使用

redux-toolkit

这是一款状态管理的一种

使用

在src创建 stroe文件

在 src/store/index

// store 主要存储一些多个状态管理的集中管理文件
import { configureState } from '@reduxjs/toolkit'
const store = configureState({
    reducer:{
        
    }
})

在src/features/counter/index.jsx

import { createSlice } from '@reduxjs/toolkit'
const initialState= {
    Msg: "张三",
}
const counter = createSlice({
    name:"counter",
    initialState,
})
export default counter.reducer;

下一步src/store/index

import { configureState } from '@reduxjs/toolkit'
import counter from 'features/counter/index.jsx'
const store = configureState({
    // configureState 中的reducer 只保存 多个文件的状态管理数据
    reducer:{
        counter,
    }
})

下一步将store放在 provider中

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./store/index";
ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);

如果上面全部完成 我们就可以在页面使用了

views/Msg.jsx

import React from 'react'
import { useSelector } from 'react-rudex'
function Msg() {
  const Msg=useSelector((store)=>store.名字(counter).Msg)
  return (
    <div>Msg  {Msg} </div>
  )
}

export default Msg

修改

import { createSlice } from '@reduxjs/toolkit'
const initialState= {
    Msg: "张三",
}
const counter = createSlice({
    name:"counter",
    initialState,
    // 该方法中只能同步修改不能异步修改
    reducers:{
        // 方法名字
        MsgChange(state,action){
            //只要学过react 就知道 action是什么😡
            let { type,payload }=action
            payload 有可能是基础类型也有可能是引用类型这都是由使用者来决定
            state.value=payload  || state.value=payload.xxxx

        }
    }
})
export { MsgChange } = counter.action 
export default counter.reducer;

在 Msg页面中{}

import React from 'react'
import { useSelector,useDispatch } from 'react-rudex'
import { MsgChange } from 'features/counter/index.jsx'
function Msg() {
  const Msg=useSelector((store)=>store.名字(counter).Msg)
  const dispatch=useDispatch();
  return (
    <div  onClick="{()=>dispatch(MsgChange(新的值))}">Msg  {Msg} </div>
  )
}

export default Msg

异步修改

如果你先要发送ajax请求 可以:

/api/index.jsx

import { reqeust } from '../request.js' //常用的axios封装 不多解释
import { createAsyncThunk } from '@reduxjs/toolkit'

export const GET_LESSONS=createAsyncThunk("状态管理名字/方法(asyncFun)",(params)=>reqeust.get("/https://cnodejs.org/api/v1 /topics",{params}))

在 counter页面

import { createSlice } from '@reduxjs/toolkit'
import { GET_LESSONS } from '../api/index.jsx'
const initialState= {
    Msg: "张三",
}
const counter = createSlice({
    name:"counter",
    initialState,
    // 该方法中只能同步修改不能异步修改
    reducers:{
        // 方法名字
        MsgChange(state,action){
            //只要学过react 就知道 action是什么😡
            let { type,payload }=action
            payload 有可能是基础类型也有可能是引用类型这都是由使用者来决定
            state.value=payload  || state.value=payload.xxxx

        }
    },
    extraReducers:{
        [GET_LESSONS.fuifulled]:(state,action)=>{
           //axios 请求成功 resolve
           // action 返回值不用多说 type和payload
            state.xxxx=action.payload  //payload 可能是个基础类型 由使用者来决定
            
        },
        [GET_LESSONS.rejected]:(state,action)=>{
            //请求失败 reject
        }
    }
})
export { MsgChange } = counter.action 
export default counter.reducer;

调用异步操作

Msg.jsx 路由页面

import { GET_LESSONS } from '../api'
function Msg(){
    useEffect(()=>{
        //调用该方法实现 异步 赋值  
        GET_LESSONS()
    },[])
    return (
        <>
           
        </>
    )
}
export default Msg;