redux的简单使用

redux是一个数据仓库解决方案，通过 createStore 创建store，通过store.dispatch(action）来更新数据。在react中使用可以通过这些包redux,react-redux,redux-thunk,redux-logger

• redux,全局数据仓库
• react-redux，提供 Provider组件和 connect方法包裹组件，将映射 store的state和使用dispatch的方法映射到react组件的props
• redux-thunk，使 redux 的store.dispatch(action)可以接收函数(dispatch)=>{},可以进行异步操作
• redux-logger，在控制台打印state改变前后的值

创建store

import { applyMiddleware, compose, legacy_createStore } from "redux";
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import reducers from "./reducers";

// 第一个参数 reducers: 通过 combineReducers 组合的reducers，
// 第二个参数为 初始值，
// 第三个参数为 使用中间件，redux-thunk 中间件使 store.dispatch(action) 的action不止只能为对象，也可以为函数 
// 此时store与react没有联系，可以直接使用 store.getState(),store.dispatch(action),store.subscribe(listener)
// 通过 react-redux 提供的 Provider组件和 connect 方法可以把 将 store 的 state和 dispatch 映射为react组件的 props
const store = legacy_createStore(reducers,{},compose(applyMiddleware(thunk,logger)))

export default store

组合不同的recuder

import { combineReducers } from "redux";
import a from "./a";
import b from "./b";
// 组合多个 reducer，相当于 vue中的不同module的store
export default combineReducers({
    a,
    b
})

统一 action type

export const ACTION_TYPES = {
    A:{
        ADD:'A_ADD',
        SUB:'A_SUB'
    },
    B:{
        ADD:'B_ADD',
        SUB:'B_SUB'
    }
}

ActionCreator,可以返回 对象 或者 异步函数

import { ACTION_TYPES } from "../actionTypes"

// action creator 这些函数返回 action对象，或者 入参为增强的 dispatch 的函数（函数里可以有异步操作）
const addBValue = (value)=>{
    return {
        type:ACTION_TYPES.B.ADD,
        data:{value}
    }
}

// 异步逻辑可以在这里实现
const addBValueAync = (value)=>{
    return async(dispatch)=>{
        await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('')
            }, 2000);
        })
        dispatch(addBValue(value))
    }
}

export {addBValueAync,addBValue}

组件中使用全局 store方式

直接使用创建的 store.dispatch(）

import React from "react";
import Counter from "./Count";
import "./App.css";
import store from "./store";
import { addAValueAync } from "./store/actions/a";
import { connect } from "react-redux";

function App({a,b,addAValueAsync}) {
  
  return (
    <div className="App">
      <h1>react</h1>
      <button onClick={()=>{
      // 这里直接使用 store.dispatch()
        store.dispatch(addAValueAync(2))
      }}>click</button>
      <button onClick={()=>{
        addAValueAsync(3)
      }}>click</button>
      <h1>a::{a}</h1>
      <h1>b::{b}</h1>
    </div>
  );
}

const mapStateToProps = (state)=>{
  return {
    a:state.a.a,
    b:state.b.b
  }
}
const mapDispatchToProps = (dispatch)=>{
  return {
    addAValueAsync(value){
      dispatch(addAValueAync(value))
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(App) ;

使用 react-redux 连接 redux 和 react

1. 使用 react-redux 的 Provider组件包裹根组件

import { Provider } from "react-redux";
import store from "./store";
root.render(
  // 
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

2. 使用 connnect()(组件)要映射 state 和dispatch 方法到 props的组件

function App({a,b,addAValueAsync}) {
  
  return (
    <div className="App">
      <h1>react</h1>
      <button onClick={()=>{
        store.dispatch(addAValueAync(2))
      }}>click</button>
      <button onClick={()=>{
        // 
        addAValueAsync(3)
      }}>click</button>
      <h1>a::{a}</h1>
      <h1>b::{b}</h1>
    </div>
  );
}

const mapStateToProps = (state)=>{
  return {
    a:state.a.a,
    b:state.b.b
  }
}
const mapDispatchToProps = (dispatch)=>{
  return {
    addAValueAsync(value){
      dispatch(addAValueAync(value))
    }
  }
}
// 连接 react 组件和 redux
export default connect(mapStateToProps,mapDispatchToProps)(App) ;