redux 新

随着函数组件的hook流行,redux也做了相应的优化,

使用新版的redux需要下载

@reduxjs/toolkit
npm i @reduxjs/toolkit

首先新版的redux就是在创建根文件的时候废弃了createstore 改用configureStore,

import {configureStore} from '@reduxjs/toolkit'
export default configureStore({
   reducer:{
    
   }
})
创建一个管理状态的reducer

import {createSlice} from '@reduxjs/toolkit'
const ListFun = createSlice({
    name:'ListFun',
    initialState:[
        {name:'张三',age:18}

    ],

    reducers:{
        addList(state,action) {
            console.log(action.payload);
            // state.push(action.payload)
           return [...state,action.payload]
        }
    }
})
export const {addList} =ListFun.actions

export default ListFun.reducer
//这样把多个状态管理在一个文件之中,减少了代码的复杂程度,便于操作和管理

//引入reducer

import {configureStore} from '@reduxjs/toolkit'
import ListFun from './reducers/ListReducer/index'
export default configureStore({
   reducer:{
       ListFun
   }
})
//挂载方式还是和老版的的一样

import {createRoot} from 'react-dom/client'
import App from "./App";
import {Provider} from 'react-redux'
import store from './store/index'
createRoot(document.getElementById('root'))
.render(
    <Provider store={store}>
        <App/>
    </Provider>
)
//在组件中调用:需要引入两个hook

import {useDispatch, useSelector} from "react-redux";
//定义变量接受数据和方法,dispatch是调用方法的

const dispatch =useDispatch()
const listArray=useSelector(state=>state.ListFun)