前言

博主这两天正在学习React基础，学到了状态管理模块 - Redux。不得不说，可能是我基础弱的缘故，使用起来，让我一愣一愣的。这里，简单放几段代码，用来记录，等到用的时候可以拿出来再看看。

正文

目录结构

store/modules/takeaway.js

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

const foodsStore = createSlice({
    name:"foods",
    initialState:{
        foodsList:[],
    },
    reducers:{
        setFoodsList(state,action){
            state.foodsList = action.payload;
        }
    }
})


const {setFoodsList} = foodsStore.actions
const fetchGoodsList=()=>{
    return async(dispatch)=>{
        const res = await axios.get("http://localhost:3004/takeaway");
        dispatch(setFoodsList(res.data));
    }
}

const reducer = foodsStore.reducer


export {fetchGoodsList}

export default reducer

store/index.js

import foodsReducer from "./modules/takeaway"
import { configureStore } from "@reduxjs/toolkit"

const store = configureStore({
    reducer:{
        foods:foodsReducer,
    }
})

export default store

index.js

import React from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux'
import store from './store'

import App from './App'


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

App.js