react——【Redux Toolkit】

它開箱即用的高效 Redux 開發工具集，是redux新的庫，也是官方推薦今後在項目中使用的redux庫，内置了immer、redux-thunk和redux-devtools

安裝：

yarn add -S @reduxjs/toolkit react-redux      

這種寫法上來就是在分子產品的。

同步操作

import {createSlice} from "@reduxjs/toolkit"
// 同步操作
const countSlice = createSlice({
    // 命名空間名稱，比redux中更好，redux沒有
    // 它的名稱要和入口檔案中configureStore中的reducer配置對象中的key名稱要一緻
    name:"count",
    // 初始化資料源
    initialState:{
        num:1000
    },
    // 修改資料的方法集
    reducers:{
        // 元件中派發dispatch(setNum(2)) // 2就會給payload
        // state它就是proxy對象[immer]
        steNum(state,{payload}){
            state.num += payload
        }
    }

})
// 導出給在元件中調用
export const {steNum} = countSlice.actions
// 把目前子產品的reducer導入，集合到大的reducer中
export default countSlice.reducer      

index.js中集中導出

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

import count from "./modules/count"

export default configureStore({
    reducer:{
        count
    }
})      

就可以看見：

擷取資料就得考慮這個子產品化的問題：

• 資料注入

import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router} from 'react-router-dom';
import App from './App';

import {Provider} from "react-redux"
import store from './store';
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);


root.render(
    <Provider store={store}>
        <Router>
            <App />
        </Router>
    </Provider>

);      

• 資料擷取/資料修改

//擷取
const count = useSelector(state=>state.count.num);
//dispatch，導入修改的方法
import {steNum} from "./store/modules/count"
const dispatch = useDispatch()
dispatch(steNum(2))      

異步操作

方案一：推薦的一種寫法：

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

const usersSlice = createSlice({
    name:"users",
    initialState:{
        users:[]
    },
    reducers:{
        setuser(state,{payload}){
            state.users.push(payload)
        }
    }
})
export const {setuser}  = usersSlice.actions


// 内置了網絡請求
// 這裡也可以傳遞參數
//網絡請求  --- 内置redux-thunk是以，就可以在此處完成異步操作  -- 我推薦的
export const fetchThunkuser = () =>async dispatch=>{
    let ret  = await (await fetch("mock/users.json")).json();
    dispatch(setuser(ret.data));
}
export default usersSlice.reducer      

擷取資料
const users = useSelector(state=>state.users.users);
異步請求方法；
import {fetchThunkuser} from "./store/modules/users"
========
發送異步請求：
<button onClick={e=>{dispatch(fetchThunkuser())}}>添加使用者</button>
++++++++
響應式資料
+++++++++
<ul>
{
    users.length>0? 
        users.map((item,index)=>(
            <li key={index}>{item.name}---{item.sex}</li>
        ))
    :
    null
}
</ul>      

import {createSlice,createAsyncThunk} from "@reduxjs/toolkit";
// 方案2
// 寫在上面,進行網絡請求
// 參數一就是類型别名，參數二是一個回調函數
export const fetchUser = createAsyncThunk('user/fetchUser', async () => {
    // 實作異步資料擷取
    let ret = await (await fetch("mock/users.json")).json();
    // return 中的資料就是傳回到state中的users中的資料  一定要return
    return ret.data
})
  

const usersSlice = createSlice({
    name:"users",
    initialState:{
        users:[]
    },
    reducers:{
        setuser(state,{payload}){
            state.users.push(payload)
        }
    },
    // 解決異步
    extraReducers: builder => {
    // 模拟了promise的3個狀态，隻取成功狀态 fulfilled
    // payload中的資料就是fetchUser方法它return出來的資料
    builder.addCase(fetchUser.fulfilled, (state, { payload }) => {
        state.users.push(payload)
    })
  }
})

export const {setuser}  = usersSlice.actions

export default usersSlice.reducer