react学习day7

redux使用

npm i @reduxjs/toolkit react-redux

目录结构配置

• store
  • modules
    • channelStore.js
    • counterStore.js
  • index.js
• index.js

index.js

// @ts-nocheck
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import store from './store'
import {Provider} from 'react-redux'

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

store编写

• counterStore.js

import {createSlice} from '@reduxjs/toolkit';
const counterStore=createSlice({
    name:'counter',
    initialState:{
        count:0
    },
    reducers:{
        increment(state){
            state.count++
        },
        decrement(state){
            state.count--
        },
        addToNum(state,action){
            state.count=action.payload
        }
    }
})
const {increment,decrement,addToNum}=counterStore.actions
const reducer=counterStore.reducer
export {increment,decrement,addToNum}
export default reducer

• channelStore.js

import {createSlice} from '@reduxjs/toolkit';
const channelStore=createSlice({
    name:'channel',
    initialState:{
        channelList:[]
    },
    reducers:{
        setChannels(state,action){
            state.channelList=action.payload
        },
    }
})
const {setChannels}=channelStore.actions
const fetchChannelList=()=>{
    return async (dispatch)=>{
        const res= await fetch('http')
        dispatch(setChannels(res.data))
    }
}
export {fetchChannelList}
const reducer=channelStore.reducer
export default reducer

• store/index.js

import {configureStore} from '@reduxjs/toolkit'
import counterReducer from './modules/counterStore'
import channelReducer from './modules/channelStore'
const store=configureStore({
    reducer:{
        counter:counterReducer,
        channel:channelReducer,
    }
})
export default store

• component里调用store

import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
import './App.css'
import {useDispatch, useSelector} from 'react-redux'
import {increment,decrement,addToNum} from './store/modules/counterStore'
import {fetchChannelList} from './store/modules/channelStore'
function App() {
const {count}=useSelector(state=>state.counter)
const {channelList}=useSelector(state=>state.channel)
const dispatch=useDispatch()
useEffect(()=>{
  dispatch(fetchChannelList())
},[dispatch])
  return (
    <div>
      <button onClick={()=>{dispatch(decrement())}}>-</button>
      {count}
      <button onClick={()=>{dispatch(increment())}}>+</button>
      <button onClick={()=>{dispatch(addToNum(10))}}>+10</button>
    {/* {channelList.map(v=><li>v</li>)} */}
    </div>
  );
}
export default App;