redux使用教程

基本使用方式

1.首先在项目中安装相关依赖

npm i react-redux @reduxjs/toolkit

2.最外层构建目录

3.user.js代码

import { createSlice } from '@reduxjs/toolkit'

const userStore = createSlice({
    name: 'user',
    // 初始值
    initialState: {
        token: ''
    },
    // 同步修改方法
    reducers: {
        setToken(state, action) {
            state.token = action.payload
        }
    }
})

// 解构出actionCreater
const { setToken } = userStore.actions

// 获取reducer函数
const userReducer = userStore.reducer

export { setToken }

export default userReducer

4.index.js代码如下

import { configureStore } from '@reduxjs/toolkit'
import userReducer from './modules/user'

const store = configureStore({
    reducer: {
        user: userReducer
    }
})

export default store

5.入口文件index.js代码如下

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.js'
import { RouterProvider } from 'react-router-dom'
import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

使用方式

import { useDispatch } from 'react-redux'
import { setToken } from '@/store/modules/user'

const App = () => {
    const dispatch = useDispatch()
    return (
        <button onClick={() => dispatch(setToken('token'))}>获取token</button>
    )
}

异步使用方式

1.user.js

import { createSlice } from '@reduxjs/toolkit'

const userStore = createSlice({
    name: 'user',
    // 初始值
    initialState: {
        token: ''
    },
    // 同步修改方法
    reducers: {
        setToken(state, action) {
            state.token = action.payload
        },
        setFoodsList(state, action) {
            state.foodsList = action.payload;
        },
    }
})

// 解构出actionCreater
const { setToken } = userStore.actions

// 异步获取
const fetchFoodsList = () => {
    return async (dispatch) => {
       const res = await axios.get('http://localhost:3004/takeaway');
       dispatch(setFoodsList(res.data))
    }
}

// 获取reducer函数
const userReducer = userStore.reducer

export { setToken, fetchFoodsList }

export default userReducer

使用方式

import { useDispatch } from 'react-redux'
import { fetchFoodsList } from '@/store/modules/user'

const App = () => {
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(fetchFoodsList())
    }, [dispatch])
    return (
        <div></div
    )
}

获取store中数据

   import { useSelector } from 'react-redux'
   const App = () => {
    const { foodsList, token } = useSelector(state => state.user)
    return (
        <div>{ token }</div
    )
}