由redux到react-redux再到rematch

最新推荐文章于 2024-08-03 09:49:02 发布

IsPinocchio

最新推荐文章于 2024-08-03 09:49:02 发布

阅读量619

点赞数 3

分类专栏： React系列文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Pinoochio/article/details/122115950

版权

React系列专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这比较适合看过redux但看了跟没看一样的同学，帮助记忆理清里面的基础知识

一. Redux

1. Store

Store是保存数据的地方，可以把它看做一个容器。整个应用只能有一个Store。

Redux提供createStore这个函数生成store

import { createStore } from 'redux';
const store = createStore(fn);

// store也可以接受第二个参数：state的初始值，他会覆盖reducer的state参数中的默认初始值
const store = createStore(fn, initState);

2. State

当你想拿到某个时刻的数据state时，需要生成对应的store快照。

const state = store.getState();

3. Action

由于用户触碰不到代码（State），只能通过触碰View来通知代码服务(store)改变State，这个由View发起的通知就是Action。

Action是一个对象，其中type是必须的，表示Action的名称。其他属性可以自由设置。

const action = {
  type: "ADD",
  payload: "data"
}

可以理解为，要触发一个ADD行为，携带的参数是payload。

3.3 Action Creator

类似于工厂模式，Action肯定会有很多种消息，因此可以写一个Action Creator来生产一个Action

function AddCreator(text) {
  return {
    type: "ADD",
    payload: text
  }
}

4. Dispatch

你可以将action理解为一个通知单，那么View如何发出这个通知单给代码服务(store)呢，就是通过dispatch。

只要给dispatch传入一个action参数，View就把通知单发出去了！

import { createStore } from 'redux';
const store = createStore(fn);

const action = {
  type: "ADD",
  payload: "data"
}

store.dispatch(action);

5.Reducer

View把通知单传给代码服务后，代码服务(Store)总要根据action中的内容去进行相应的处理的。reducer就是用来识别action并进行相应处理的处理器。他接收当前State和Action作为参数，返回一个新的State。

//其实就是先去判断action要执行哪个操作，再把对应的state更新并返回
function reducer = (state = initState, action) => {
  switch(action.type) {
    case 'ADD':
      return state + action.payload;
    default:
      return state
  }
}

注意这个处理器是store的，也就是说，store的创建是伴随reducer参数来初始化的。

import { createStore } from 'redux';
const store = createStore(reducer);

6. Subscribe

Store也提供了subscribe方法来设置监听函数，一旦State发生变化，就会自动执行这个函数。

store.subscribe返回一个函数，调用这个函数可以解除监听。

const listener = function() {
	console.log(store.getState())
}
let unsubscribe = store.subscribe(listener);

// 解除监听
unsubscribe();

过度------------简易使用

你知道的，毕竟store不是react组件中的state，store中state的更新并不会让View也同时变化，你需要手动调用render重新渲染。

const Counter = ({ value, onIncrement, onDecrement }) => (
  <div>
  <h1>{value}</h1>
  <button onClick={onIncrement}>+</button>
  <button onClick={onDecrement}>-</button>
  </div>
);

const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    case 'DECREMENT': return state - 1;
    default: return state;
  }
};

const store = createStore(reducer);

const render = () => {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrement={() => store.dispatch({type: 'INCREMENT'})}
      onDecrement={() => store.dispatch({type: 'DECREMENT'})}
    />,
    document.getElementById('root')
  );
};

render();
// 通过监听state的改变来更新视图
store.subscribe(render);

7. 中间件

当我们想要在store的整个流程中添加一些其他功能时，我们该往哪里添加？

处理流程中涉及逻辑进程的主要就是dispatch和reducer了，但reducer要求是纯函数，不能涉及副作用，那只能在dispatch中做手脚了。

先看一下想添加一个日志功能，并将更新后的state打印出来该如何实现：

let next = store.dispatch;
store.dispatch = function changeDispatch(action) {
  console.log('dispatching', action);
  next(action);
  console.log('next state', store.getState());
}

上面对store.dispatch进行了改造，添加了一些功能，这就是中间件的雏形。中间件其实就是一个函数。

7.1 applyMiddlewares()

Redux提供了原生方法applyMiddlewares来加入中间件，增强store.dispatch的功能。

他可以将中间件组成一个数组，然后依次执行。

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();

const store = createStore(
  reducer,
  initial_state,
  applyMiddleware(logger, ...otherMiddlewares)
);

8. 如何处理异步操作

Action发出后，过一段时间再执行Reducer，这就是异步。

那么Reducer作为纯函数肯定是不可以在这里添加处理异步逻辑的，那么就得在store.dispatch中做手脚了。

想一想，如果不能同步的进行dispatch(异步) -> reducer，那不如将dispatch分为两步走，dispatch(异步获取) -> dispatch(同步发送action) -> reducer。

// 操作发起时的 Action
// 操作成功时的 Action
// 操作失败时的 Action

具体如何改造多次的dispatch可以使用redux-thunk或者redux-promise，他们处理后，dispatch可以接受不同的参数，不再局限于action对象。

二. React-Redux

回忆下之前的Redux，state更新时我们需要设置监听函数实时re-render才能更新View，想要在其他组件中使用store都得引入一下。

React-Redux解决了上述的痛点：

提供Provider把state注入全局，这样子组件就不用单独引入了
响应式。无需我们手动监听，state的更新会自动帮我们更新View
通过connnct把state和dispatch注入到当前组件的props上

1. Provider

React-Redux提供了组件，使得整个app能够访问到store中的数据，Provider是用context封装的。

2. connect

React-Redux将组件分为两种，一种是UI组件，另一种是容器组件。

UI组件只通过接受props来显示UI，容器组件负责管理数据和业务逻辑（也就是承接state和dispatch）

React-Redux提供一个connect方法能够把组件和store连接起来，把state、dispatch方法都放入到当前组件上，同时是state变成响应式。其实就是一个高阶组件包装了一下我们写的UI组件。

// index.js
import React from 'react';
import ReactDom from "react-dom"
//引入Provider
import {Provider} from "react-redux";

import Counter from "./counter/ReactReduxCounter";

import store from "./redux/basic/store"

ReactDom.render(
    <Provider store={store}>
        <Counter></Counter>
    </Provider>,
    document.getElementById("root")   
)

我们看到通过用<Provider/>来包装我们真正的reactDOM，就可以让里面所有的子组件都使用store了。

注意：用到store的子组件应该是通过connect包装后的。

// Counter.js
import React, { Component } from 'react';
import {connect} from "react-redux"

//子组件
class Counter extends Component {
    //方法调用后自动更新数据
    increment=()=>{
        this.props.increment()
    }
    decrement=()=>{
        this.props.decrement()
    }
    render() {
        return (
            <div>
                <div>{this.props.num}</div>
                
                <button onClick={this.increment}>点我+1</button>
                <button onClick={this.decrement}>点我-1</button>
            </div>
        );
    }
}

//该函数作为connect的第一个参数，能拿到state
//映射state到组建的props上
function mapStateToProps(state){
    return {
        num:state.counter
    }
}

//该函数作为connect的第二个参数，能拿到dispatch
//映射dispatch方法到组建的props上
function mapDispatchToProps(dispatch){
    return {
        increment(){
            dispatch({
                type:"increment"
            })
        },
        decrement(){
            dispatch({
                type:"decrement"
            })
        }
    }
}

//connet函数执行返回一个高阶组件
//调用这个高阶组件，传入当前组件Counter作为参数,返回一个增强的Counter组件
//这个增强的组件props里有store的state和dispach方法
export default connect( mapStateToProps , mapDispatchToProps )(Counter)

/// store.js
import { createStore } from "redux"

const defaultState={
    counter:0
}

//纯函数
let reducers =(state = defaultState ,action)=>{
    switch (action.type){
        case "increment":
            console.log("increment")
            return {
                counter:state.counter+1
            }
        case "decrement":
            return {
                counter:state.counter-1
            }
        default :
        return state 
    }
}
const store = createStore(reducers)
export default store

3. mapStateToProps()和mapDispatchToProps()

注意到，上述connect()中传递了两个参数：mapStateToProps()和mapDispatchToProps()。

通过观察connect源码（下一节）发现，他是利用了context封装了一个高阶组件，在封装过程中，会调用上述两个方法，把store中的state和dispatch取出来放到子组件的props里。这样我们在编写组件的时候，就可以无感知的调用state和dispatch了。

mapStateToProps
- 他是一个函数，接受state作为参数，返回一个对象，这个对象是你想从state中取出的数据
- ```
const mapStateToProps = (state) => {
  return {
    counter: state.counter
  }
}
```

maoDispatchToProps

他是一个函数，接受dispatch和ownProps(容器组件的props)两个对象，返回一个对象，这个对象中的值应该是一个包含可以触发dispatch的方法。

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increment(num) {
			dispatch({
        type: "increment",
        payload: num
      })
    }
  }
}

4. connect高阶组件的大致实现

function connect(mapStateToProps, mapDispatchToProps) {
  return function(WrappedComponent) {
    class Connect extends React.Component {
      componentDidMount() {
        // 组件加载完成后订阅store变化，如果store有变化则更新UI
        this.unsubscribe = this.context.store.subscribe(this.handleStoreChange.bind(this));
      }
      componentWillUnmount() {
        // 组件销毁后，取消订阅事件
        this.unsubscribe();
      }
      handleStoreChange() {
        // 更新UI
        this.forceUpdate();
      }
      render() {
        return (
          <WrappedComponent
            {...this.props}
            {...mapStateToProps(this.context.store.getState())} // 参数是store里面的数据
            {...mapDispatchToProps(this.context.store.dispatch)} // 参数是store.dispatch
          />
        );
      }
    }
    Connect.contextTypes = {
      store: PropTypes.object
    };
    return Connect;
  };
}

5. React-Redux的hook版

可能我们觉得每次都要用connect封装一下组件太麻烦了，还要写mapStateToProps和mapDispatchToProps，react-redux为我们提供了一些hooks，比如常用的useSelector和useDispatch。

useSelector接收两个参数：selector和equalityFn。第一个参数是一个函数以获取你想要的state，第二个可选参数也是个函数，用于比较状态是否发生改变，如果函数执行结果为false就表示状态发生改变，组件将重新渲染。
useDispatch直接调用可获得dispatch

import { useSelector, useDispatch } from 'react-redux'

const Home = (props) => {
  const dispatch = useDispatch();
  const number = useSelector(state => state.number);
  
  const handleClick = () => {
    dispatch({
      type: 'ADD',
      payload: 1
    })
  }
  
  return (
  	<h2>{number}</h2>
    <button onClick={handleClick}/>
  )
}

6. Redux和React-Redux的关系

依初初初学者短见，我们想要在React项目中使用共享数据时，使用的store都是通过Redux提供的createStore创建的store。React-Redux只是帮我们封装了一些方法，以帮助我们在子组件中更便利的使用state和dispatch等。

三. Rematch

如果说React-Redux是在Redux的基础上帮助子组件更便捷的使用state和dispatch。

那Rematch则是在和React-Redux搭配基础上帮我们更具封装性的创建store，加上更便利的使用state和dispatch。

1. 创建store

之前我们是通过redux的createStore的方法来创建store。

import { createStore } from 'redux';
const store = createStore(reducer, initState);

如果还想要添加一些异步处理，那可能还要加入中间件，reducer也变得很复杂。

而Rematch提供了init可以让我们把initState、reducers、异步处理方法封装在一起。

// store.js
import { init } from '@rematch/core';

const count = {
  state: 0,
  reducers: {
    increment: (state, payload) => state + payload,
    decrement: (state, payload) => state - payload
  },
  effects: {  // 带有异步处理数据的reducer
    async incrementAsync(payload) {
      await func();
      this.increment(payload);
    }
  }
}

export const store = init(count);

如果到此为止，你可以用上述生成的store正常的配合react-redux的provider、connect去使用他。

2. 模块化

rematch建议我们将数据分类保存到models文件夹下的不同的文件里。最后在models/index.js中统一导出。

例如：

models/count.js
Models/user.js

// models/index.js
export { default as count } from './count'
export { default as user } from './user'

// store.js
import { init } from '@rematch/core'
import * as models from './models'

export const store = init({models})

于是我们在每个组件上，可以直接引入store来取到想要的某个模块中的store和dispatch

// counter.js
import { store } from './store.js'

const counter = () => {
  const { counter, user } = store.getState();
  const add = store.dispatch.counter.add;
  const changName = store.dispatch.user.changeName;
	
  const handleClick = () => {
    add({
      type: 'ADD',
      payload: 1
    })
  }
  
  return (
  	<h2>{counter.number}</h2>
    <h2>{user.name}</h2>
    <button onClick={handleClick}/>
  )
}