redux、react-redux、中间件基础知识记录

redux,react-redux等知识也比较老了,网上也有很多的例子和讲解,我这里只是自己动手去实际操作了下redux等内容,给自己记录下

  • cra快速创建项目
npx create-react-app 项目名称
  • 安装redux
npm install redux -S
  • redux三大原则
    单一数据源:整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。
    State 是只读的:唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
    使用纯函数来执行修改:Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state。
  • redux下的store
  1. 创建一个store
import { createStore } from 'redux'
const store = createStore(这里需要传入reducer)

// createStore(reducer, [preloadedState], enhancer)
  1. 创建一个reducer
我们在src下新建一个reducer目录,下面创建countReducer.js
// countReducer.js
const initialState = {
  count:'我是count-reducer里面的初始值state'
}

const countReducer = (state = initialState, { type, payload }) => {
  switch (type) {
  case 'CHANGESTATE':
    return { ...state, count:'我改变了state值'}
  default:
    return state
  }
}

export default countReducer

reducer接收2个参数,一个是初始化的state,一个是action,
这个地方只是结构赋值了action,它里面有一个type和一个payload也就是传给reducer的参数
  1. 引入reducer,使用getState()
import { createStore } from 'redux'
import countReducer from './reducer/countReducer'
const store = createStore(countReducer)
console.log(store.getState())

在这里插入图片描述
4. 使用subscribe监听

当每次dispatch action到reducer时 会被监听
const unSubscribe = store.subscribe(()=> console.log("我监听了store 当前state是",store.getState()))
// unSubscribe() 注销监听

store.dispatch({type:'CHANGESTATE'})

在这里插入图片描述
5. 这里借用官网例子计数器
新建constants文件夹下面新建index.js,这个文件主要就是声明我们的action中的type类型,就类似于vuex里面的mutation的types一样为常量

// constants/index.js
export const ADD = 'ADD'
export const SUB = 'SUB'

再在action里面引入

import { ADD, SUB } from '../constant';
export const addAction = payload => ({
  type: ADD,
  payload,
});
export const subAction = payload => ({
  type: SUB,
  payload,
});

修改下reducer

const initialState = {
  count: 0,
};
export default (state = initialState, { type, payload }) => {
  switch (type) {
    case 'ADD':
      return { ...state, count: state.count + 1 };
    case 'SUB':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

修改下index.js
这里我们通过props把store,onAdd,onSub方法传递给App组件内部,当我们修改state时,需要借用subscribe来监听每次state改变,此时需要让它执行render的渲染这样视图才会变化

src/index.js
// 引入redux createStore
import { createStore } from 'redux';
// 引入reducer
import { countReducer } from './reducer/countReducer';
// 引入action
import { addAction, subAction } from './action/countAction';

const store = createStore(countReducer);

function render() {
  ReactDOM.render(
    <React.StrictMode>
      <App store={store} onAdd={() => store.dispatch(addAction())} onSub={() => store.dispatch(subAction())} />
    </React.StrictMode>,
    document.getElementById('root')
  );
}

render();

store.subscribe(() => {
  render();
  console.log('我监听了store 当前state是', store.getState());
});

App.js
import React, { Component } from 'react';
import './App.css';
import PropTypes from 'prop-types';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div>{this.props.store.getState().count}</div>
        <div>
          <button onClick={() => this.props.onAdd()}>add</button>
          <button onClick={() => this.props.onSub()}>sub</button>
        </div>
      </div>
    );
  }
}

App.propTypes = {
  store: PropTypes.object.isRequired,
  onAdd: PropTypes.func.isRequired,
  onSub: PropTypes.func.isRequired,
};

export default App;

在这里插入图片描述

  • react-redux
npm install react-redux -S

react-redux是专门提供给react配合使用的,在上面的例子中我们是把所有的操作通过props传递到了子组件,这样以后组件越来越多了,那不是每层组件我们都会去操作,所以react-redux提供了connect方法使用。在使用connect能使用的基础上是react-redux提供的Provider提供了我们的顶层store同context一样挂载在组件树的顶层,所以子组件才可以通过connect与store进行通信联系。

  1. connect参数
    connect是一个高阶函数,它接收我们传递的state,dispatch组合然后再接收一个组件,最后返回一个被挂载了store的组件,所以内部可以使用。
    connect方法有四个参数,具体参考react-redux connect
    第一个参数:mapStateToProps(state,[ownProps]),我理解的就是将state映射到props上面方便我们后面通过props获取,它也有两个参数,一个是state,一个是当前组件的props,我们在使用connect的时候需要给出mapStateToProps函数,这样当我们的state变化时会调用该函数也就映射了最新的state,这样我们的视图也会改变,传了第二参数,当组件自身的props变化了它也会触发该函数,一般情况下我们只需要第一个参数,具体看业务
import React, { Component } from 'react';
import './App.css';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { addAction, subAction } from './action/countAction';

// 映射state 常规写法
// const mapStateToProps = state => ({
//   appCount:state.count
// })
// 解构赋值写法
const mapStateToProps = ({count}) => {
  return {
    count
  }
}

class App extends Component {
  render() {
    
    return (
      <div className="App">
        <div>{this.props.count}</div>
        <div>
          <button>add</button>
          <button>sub</button>
        </div>
      </div>
    );
  }
}
App.propTypes = {
  count: PropTypes.number.isRequired,
  add: PropTypes.func.isRequired,
  sub: PropTypes.func.isRequired,
};
export default connect(mapStateToProps)(App);

第二个参数:mapDispatchToProps : object | (dispatch,[ownProps]),它可以时一个对象object也可以是一个包含两个参数的函数;我理解的就是将store.dispatch映射到props上面方便我们后面通过props获取,它也有两个参数,一个是dispatch,一个是当前组件的props。

import React, { Component } from 'react';
import './App.css';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { addAction, subAction } from './action/countAction';

映射state
// const mapStateToProps = state => ({
//   appCount:state.count
// })

const mapStateToProps = ({ count }) => {
  return {
    count,
  };
};

 映射store.dispatch 函数模式
// const mapDispatchToProps = dispatch => {
//   return {
//     add: () => dispatch(addAction()),
//     sub: () => dispatch(subAction()),
//   };
// };

对象模式 这里调用bindActionCreators会自动的给我们绑定dispatch 
bindActionCreators(mapDispatchToProps, dispatch)
const mapDispatchToProps = {
  add: addAction,
  sub: subAction,
};

class App extends Component {
  static propsType = {
    count: PropTypes.number.isRequired,
    add: PropTypes.func.isRequired,
    sub: PropTypes.func.isRequired,
  };
  render() {
    // state
    const { count } = this.props;
    // dispatch
    const { add, sub } = this.props;
    return (
      <div className="App">
        <div>{count}</div>
        <div>
          <button onClick={() => add()}>add</button>
          <button onClick={() => sub()}>sub</button>
        </div>
      </div>
    );
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

第三参数第四参数参考官网说明。

  1. connect装饰器
    connect装饰器只是一个语法糖,实际大体上跟使用函数差不多,我们只需将
    connect(mapStateToProps, mapDispatchToProps)(App)改成原来的App
    然后在class前面头部添加@connect(mapStateToProps,mapDispatchToProps)
  • redux中间件
    我理解的中间件就是在我们操作dispatch action的时候可以拦截我们的action直至操作完state,它内部有个next方法,会一个一个执行下一个action。
    比如redux-thunk,redux-saga,redux-log,在前面的createStore函数中接收3个参数,第一个是reducer,第二个是预备state,第三个参数我们就可以放置中间件,但是还需要redux提供的applyMiddleware方法。
  1. redux-logger
npm i redux-logger redux-thunk -S

src/index.js
import {createStore,addMiddleware} from 'redux'
import reduxLogger from 'redux-logger'
import countReduceer from './reducer/countReducer'
const store = createStore(countReducer,addMiddleware(reduxLogger))

这样我们在每次操作dispatch的时候都会打印出操作日志
在这里插入图片描述
2. redux-thunk

import reduxThunk from 'redux-thunk'
const store = createStore(countReducer,addMiddleware(reduxThunk))

接下来reducer下面再创建一个asyncReducer.js

const initialState = {
  text: '我没执行异步',
};

export default (state = initialState, { type, text }) => {
  console.log(text);
  
  switch (type) {
    case 'ASYNCSTART':
      return { ...state, text };
    case 'ASYNCEND':
      return { ...state, text };
    case 'ASYNCERROR':
      return { ...state, text };
    default:
      return state;
  }
};

此时我们有了两个reducer,但是createStore只接收一个reducer,这个时候需要用到redux提供的combineReducers
reducer文件下新建index.js

import { combineReducers } from 'redux';
import countReducer from './countReducer';
import asyncReducer from './asyncReducer';
const rootReducer = combineReducers({
  countReducer,
  asyncReducer,
});
export default rootReducer;

action文件下新建asyncAction.js

import { ASYNCSTART, ASYNCEND, ASYNCERROR } from '../constants';

export const getInfo = payload => (dispatch, state) => {
  dispatch(fetch_start('异步请求开始啦'));
  fetch('https://randomuser.me/api/')
    .then(res => {
      dispatch(fetch_end('异步请求结束啦'));
      console.log(res);
    })
    .catch(err => {
      console.log(err);
      dispatch(fetch_error('异步请求出错啦'));
    });
};

const fetch_start = text => {
  return {
    type: ASYNCSTART,
    text,
  };
};

const fetch_end = text => {
  return {
    type: ASYNCEND,
    text,
  };
};

const fetch_error = text => {
  return {
    type: ASYNCERROR,
    text,
  };
};

constants文件夹的index.js里面新建命名

export const ASYNCSTART = 'ASYNCSTART'
export const ASYNCEND = 'ASYNCEND'
export const ASYNCERROR = 'ASYNCERROR'

同样的在我们App组件里面需要更改地方注意就是,在获取state哪里,现在我们合并了两个reducer所以

const mapStateToProps = ({ countReducer, asyncReducer }) => {
  return {
    count: countReducer.count,
    text: asyncReducer.text,
  };
};

整个App.js

import React, { Component } from 'react';
import './App.css';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { addAction, subAction } from './action/countAction';
import { getInfo } from './action/getInfoAction';

// 映射state
// const mapStateToProps = state => ({
//   appCount:state.count
// })

const mapStateToProps = ({ countReducer, asyncReducer }) => {
  return {
    count: countReducer.count,
    text: asyncReducer.text,
  };
};

// 映射store.dispatch 函数模式
// const mapDispatchToProps = dispatch => {
//   return {
//     add: () => dispatch(addAction()),
//     sub: () => dispatch(subAction()),
//   };
// };

// 对象模式 这里调用bindActionCreators会自动的给我们绑定dispatch
// bindActionCreators(mapDispatchToProps, dispatch)
const mapDispatchToProps = {
  add: addAction,
  sub: subAction,
  getInfo,
};

class App extends Component {
  static propsType = {
    count: PropTypes.number.isRequired,
    add: PropTypes.func.isRequired,
    sub: PropTypes.func.isRequired,
  };
  render() {
    // state
    const { count, text } = this.props;
    // dispatch
    const { add, sub, getInfo } = this.props;
    return (
      <div className="App">
        <div>{count}</div>
        <div>
          <button onClick={() => add()}>add</button>
          <button onClick={() => sub()}>sub</button>
        </div>
        <hr />
        <div>{text}</div>
        <div>
          <button onClick={() => getInfo()}>点我执行异步操作</button>
        </div>
      </div>
    );
  }
}
// App.propTypes = {
//   count: PropTypes.number.isRequired,
//   add: PropTypes.func.isRequired,
//   sub: PropTypes.func.isRequired,
// };
export default connect(mapStateToProps, mapDispatchToProps)(App);

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值