react 学习笔记 reduex仓库

安装redux和reace-redux

目录结构

pages
	  -Home
		 index.js
redux
	  -action
		index.js
		count.Action.js
		user.Action.js
	  -reduces
	  	index.js
	  	count.Reduces.js
	  	user.Reduces.js
	  index.js
index.js

1,reduces用来修改数据
reduces/count.Reduces.js

// reducer修改数据的唯一方案
// reducer是一个普通函数，函数参数就是仓库的默认数据
// 这个函数返回的结果，更新仓库数据
const data = { count: 1 }
function countReducer(state = data, action) {
  switch (action.type) {
    case "ADD":
      state.count += action.payload
      return { ...state }
    case "DEL":
      state.count -= action.payload
      return { ...state }
    default:
      return state
  }
}

export default countReducer

合并为一个文件导出 reduces/index.js

import countReducer from "./count.Reducer"
import userReducer from "./user.Reducer"

import { combineReducers } from 'redux'
export default combineReducers({
  count: countReducer,
  user: userReducer
})

2，action通知仓库修改
action/count.Action.js

// 修改仓库数据
// 这个通知对象，通知reducer对仓库数据进行修改
// type必须写 其他自定义
export const action1 = {
  type: "ADD",
  payload: 10
}
export const action2 = {
  type: "DEL",
  payload: 10
}

合并导出 action/index.js

export { action1, action2 } from "./count.Action"
export { actionUser } from "./user.Action"

4,导出仓库redux/index.js

import { legacy_createStore as createStore } from 'redux'
import reducers from './reduces'

const store = createStore(reducers)

export default store

3,页面使用 home/index.js

import { Button } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { action1, actionUser } from '@/redux/action'

const HomePage = () => {
  // 派发action对象到reducer修改仓库数据
  const dispatch = useDispatch()
  // 获取仓库数据，传递函数，调用函数，将仓库数据返回给调用者
  const { count, user } = useSelector((state) => {
    return state
  })
  const onDisCount = () => {
    dispatch(action1)
  }
  const onDisUser = () => {
    dispatch(actionUser())
  }

  return (
    <div>
      <div>
        reducer测试:{count.count}
        <Button type="primary" block onClick={onDisCount}>reducer测试</Button>
        <p>
          id: {user.user.id}
        </p>
        <Button type="primary" block onClick={onDisUser}>修改id</Button>
      </div>
    </div>
  )
}
export default HomePage

4,index全局引用仓库

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

import store from '@/redux'
import { Provider } from 'react-redux'

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

5，异步 安装 yarn add redux-thunk
修改redux/index.js
添加 applyMiddleware reduxThunk

import { legacy_createStore as createStore, applyMiddleware } from 'redux'
import reducers from './reduces'
import reduxThunk from 'redux-thunk'

const store = createStore(reducers, applyMiddleware(reduxThunk))

export default store

异步aciton
user.Reducer.js和count.Reducer.js格式保持不变
添加action/user.Action.js

// 异步 如果有dispatch就先执行中间件 yarn add redux-thunk
// 异步和同步 差异 dispatch外面多了一层dispatch方法和异步请求
import { getChannels } from "@/api"
export const actionUser = () => {
  return async (dispatch) => {
    const res = await getChannels()
    // 先拿到后端请求 再派发reducer
    dispatch({
      type: "USER",
      payload: { id: res.message }
    })
  }
}

reduces/user.Reducer.js

const data = { user: { id: 1 } }
function userReducer(state = data, action) {
  switch (action.type) {
    case "USER":
      state.user = action.payload
      return { ...state }
    default:
      return state
  }
}

export default userReducer