redux的使用

Redux和React-redux 的使用

redux 是一个独立的js库

首先我们需要通过npm 进行安装

npm i redux react-redux  redux-devtools-extension redux-persist redux-promise redux-thunk

安装时如果遇到以下报错

npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: react-redux-demo@0.1.0
npm error Found: redux@4.2.1
npm error node_modules/redux
npm error   redux@"^4.2.1" from the root project
npm error
npm error Could not resolve dependency:
npm error peer redux@"^5.0.0" from redux-thunk@3.1.0
npm error node_modules/redux-thunk
npm error   redux-thunk@"^3.1.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\28171\AppData\Local\npm-cache\_logs\2025-03-01T07_13_09_235Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\28171\AppData\Local\npm-cache\_logs\2025-03-01T07_13_09_235Z-debug-0.log

可以执行

npm i redux react-redux  redux-devtools-extension redux-persist redux-promise redux-thunk --force

安装完成后再src 目录下创建 Store 仓库文件家

Store/index

import {createStore,applyMiddleware} from 'redux'
//redux 管理插件
import {composeWithDevTools} from 'redux-devtools-extension'
// redux 持久化存储插件

import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // 默认 to localStorage for web
//用于处理异步请求
import {thunk} from 'redux-thunk'
//
import promiseMid from 'redux-promise'
import Allreduser from './Reducers/index'

//对reducer纯函数进行持久化处理
var persistedReducer = persistReducer({key:'redux',storage},Allreduser)
export const store= createStore(persistedReducer,composeWithDevTools(applyMiddleware(thunk,promiseMid)))
export var persistor = persistStore(store)

//react-thunk

使用react-thunk后提交的action可以返回一个异步的处理函数
const setAjaxList = (data)=> {
    return async (dispatch)=>{
        // setTimeout(()=>{
        //     console.log("异步执行")
        // },2000)
        let {data} = await axios.get("http://elm.cangdu.org/v1/cities?type=hot")
        console.log(data)
        // 进行异步派发
        dispatch({
            type:SETDATA,
            data
        })
    }
}

//redux-promise

//使用 redux-promise 提交的action的写法为
export const fetchData = () => {
  return {
    type: 'FETCH_DATA',
    payload: axios.get('/api/data') // 异步操作，返回一个 Promise
  };
}

// index.js的写法为

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import {store,persistor} from './Store/index'
//导入redux-persist提供的PersistGate组件
import { PersistGate } from 'redux-persist/integration/react'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </PersistGate>
  </Provider>
  
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();