redux-tookit

store下的index.js

    import {configureStore} from "@reduxjs/toolkit"
    import counterreducer from "./feature/featur"
    export default configureStore({
    reducer:{
        counter:counterreducer
    }，
 middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger)
})

子仓库

   import {createSlice} from "@reduxjs/toolkit"
import axios from "axios";
export const conterSlice = createSlice({
    name:"counter",
    initialState : {
        count :1,
        title:"redux tookit",
        arr:[]
    },
    reducers:{   // 创建完reducers回自动生成action
        fn (state,{payload}) {
            console.log(payload);
            state.count = state.count + payload.step
        },
        del (state,action) {
            state.count = state.count  - 1
        },
        setArr (state,{payload}) {
            console.log(payload);
            state.arr = payload
        }
    }
})
export const {fn,del,setArr} = conterSlice.actions // 抛出这些action
// tookit 内置了thunk
export const getlist = (data)=>{  return (dispatch)=>{
    axios.get("/api/list").then(res=>{
        console.log(res.data);
        dispatch(setArr(data))
    })
}
}



export default conterSlice.reducer

组件

import React , {useEffect} from 'react'
import {useSelector,useDispatch} from "react-redux"
import {fn,del,getlist} from "../../store/feature/featur"
function Exam() {
  const store = useSelector(state=>state.counter)
  const dispatch = useDispatch()
  console.log(store);
  useEffect(()=>{
    dispatch(getlist([1,2,13,4,5]))
  
  },[])
  let fn1 = ()=>{
      dispatch(fn({step:1}))
  }
  return (
    <div>
       <h4>{store.count}</h4>
      <button onClick={fn1}>点击</button>
    </div>
  )
}

export default Exam