Redux 学习笔记

);

}

}

export default TodoList;

store/index.js

import {createStore} from ‘redux’;

import reducer from ‘./reducer’;

const store = createStore(reducer);

export default store;

store/reducer.js

import {DELETE_TODO_ITEM,CHANGE_INPUT_VALUE,ADD_TODO_ITEM} from ‘./actionType’

const defaultState = {

inputValue:‘’,

list:[]

}

//reducer可以接收state，但是不能修改state

export default (state = defaultState,action) => {

console.log(state,action);

if(action.type === CHANGE_INPUT_VALUE){

const newState = state;

newState.inputValue = action.value;

return newState;

}

if(action.type === ADD_TODO_ITEM){

const newState = state;

newState.list.push(newState.inputValue);

newState.inputValue = ‘’;

return newState;

}

if(action.type === DELETE_TODO_ITEM){

const newState = state;

newState.list.splice(action.index,1);

return newState;

}

return state;

}

store/actionType.js

export const CHANGE_INPUT_VALUE = ‘change_input_value’

export const ADD_TODO_ITEM = ‘add_todo_item’

export const DELETE_TODO_ITEM = ‘delete_todo_item’

参考文章

核心API：

• createStore 创建store

• store.dispatch 派发action，把数据上传到Store中

• store.getState 获取store中所有的数据内容，但是Store中的数据发生变化时，组件不会知道

• store.subscribe 监听Store中的数据变化，Store中的数据一旦发生变化，该方法就会被执行

4、Redux-thunk中间件

---

第一步 安装redux-thunk中间件

npm install redux-thunk

第二步 在store中引入thunk组件

import {createStore,applyMiddleware } from ‘redux’;

import Reducer from ‘./Reducer’;

import thunk from ‘redux-thunk’;

const store = createStore(Reducer,applyMiddleware(thunk));

export default store;

第三步 封装异步请求方法

在TodoList.js组件中，封装异步获取请求的方法：

import React, { Component } from ‘react’

import Store from ‘./Store’

import axios from ‘axios’

export class TodoList extends Component {

constructor(props){

super(props);

this.state = Store.getState();

this.handleStoreChange = this.handleStoreChange.bind(this);

Store.subscribe(this.handleStoreChange);

}

//在生命周期函数中调用异步方法

componentDidMount(){

Store.dispatch(this.getTodoListDatas());

}

//异步获取请求的方法

getTodoListDatas(){

return (dispatch)=>{

axios.get(“/data.json”)

.then(resp => {

const action = {

type:‘axios_getdata’,

data:resp.data

}

dispatch(action)

})

}

}

handleStoreChange(){

this.setState(Store.getState());

}

render() {

return (

添加

---

{this.state.list.map((item,index)=>{

return (

• {item}

• );

  })}

  )

  }

  }

  export default TodoList

  第四步 在reducer中接收action信息

  const defaultState = {

  inputValue:‘’,

  list:[]

  }

  export default (state = defaultState,action) => {

  if(action.type === ‘axios_getdata’){

  const newState = state;

  newState.list = action.data;

  return newState;

  }

  return state

  }

  5、Redux中间件执行原理

  ---

  redux-thunk这个中间件可以使我们把这样的异步请求或者说复杂的逻辑可以放到action里面去处理，redux-thunk使redux的一个中间件，为什么叫做中间件

  我们说中间件，那么肯定是谁和谁的中间，那么redux的中间件指的是谁和谁的中间呢？

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xpoa4tw8-1627045469637)(C:\Users\mac\AppData\Roaming\Typora\typora-user-images\1581401374679.png)]

  如图。view在redux中会派发一个action，action通过store的dispatch方法派发给store,store接收到action，连同之前到state，一起传给reducer，reducer返回一个新到数据给store,store去改变自己到state。这是redux的一个标准流程，那么我们说redux的中间件指的是谁和谁的之间，大家一定要记住，**redux的中间件指的是action和store之间。之前我们说action只能是一个对象，所以action是一个对象直接派发给了store。**但是现在，当我们使用了redux-thunk之后，action可以是函数了。

  为什么可以是函数呢，看这张图。action通过dispatch方法被传递给store，那么action和store之间是谁，是不是就是dispatch这个方法，**实际上我们指的中间件指的是什么呢，就是对dispatch方法的一个封装，或者说是dispatch方法的一个升级，最原始的dispatch方法，他接收到一个对象之后，会把这个对象传递给store，这就是view中间件的一个情况。**当我们对dispath做了一个升级之后，比如说我们使用了redux-thunk这个中间件，对dispath做了一个升级，这个时候当你调用dispatch方法，给dispatch传递的参数是一个对象的话，那么这个dispatch就会把这个对象直接传给store。跟之前写一个对象，调用dispatch传给store没有任何的区别。但是这个时候假设传给dispatch方法是一个函数的话，这个时候dispatch方法已经升级了。他知道如果你传递过来是一个函数的话，他就不会把这个函数直接传递给store。他会怎么办呢？

  他会让你这个函数先执行，然后执行完了之后，需要调用store的时候，这个函数再去调用store。所以dispatch做了一个事情，他会根据参数的不同，执行不同的事情，如果你参数是对象，那我直接传给store。如果你参数是函数，那就把这个函数执行结束。所以讲到这大家应该知道

  **redux中间件，他的原理是非常简单的，他就是对store对dispatch方法做一个升级，之前这个dispatch方法只能接收一个对象，现在升级之后，就可以接收对象，也可以接收函数了。**当然这里用什么对他进行一个升级呢？用redux-thunk对他进行了升级。当然中间件不只redux-thunk这一个，实际上redux中间件非常多，比如说我们说的redux-log，可以记录action每次派发的日志，那他怎么记录呢？其实也很简单，每次调用 action的时候，都会通过dispatch把这个action传递给store，那么我可以对dispatch做一个升级，dispatch不仅仅把action传递给store，而且在每次传递之前呢，还通过console.log，把这个action打印出来。这样就写了一个redux-log的中间件。他可以在每次派发action的时候，把这个action打印在控制台里面。

  最近用的比较火的redux中间件，除了redux-thunk,redux-log这样的东西，还有一个中间件，叫做redux-saga。他的应用范围也非常广，redux-saga也是解决redux中间异步问题的中间件。不同于redux-thunk。redux-thunk是把异步操作放在action里面操作。而redux-saga采用的设计思想是，单独的把一个异步逻辑拆分出来，放在一个异步文件里面管理，基本上掌握了redux-thunk和redux-saga这两者的设计思路之后呢，再去做redux里面的异步逻辑，或者说复杂的逻辑，如何去拆分，就比较明白了。

  6、react-redux

  ---

  第一步 安装react-redux

  npm install react-redux

  第二步 创建store和reducer

  store.js文件

  import {createStore } from ‘redux’;

  import reducer from ‘./reducer’;

  const store = createStore(reducer);

  export default store;

  reducer.js文件

  const defaultState = {

  inputValue:‘hello’,

  list:[‘a’,‘b’,‘c’]

  }

  export default (state = defaultState,action) => {

  return state

  }

  第三步 在index.js入口文件引入Provider组件

  import React from ‘react’;

  import ReactDOM from ‘react-dom’;

  import TodoList from ‘./reactredux/TodoList’

  import {Provider} from ‘react-redux’

  import store from ‘./reactredux/store’

  const APP = (

  );

  ReactDOM.render(APP , document.getElementById(‘root’));

  第四步 在TodoList.js组件中引入connect组件

  import React, { Component } from ‘react’

  import {connect} from ‘react-redux’

  export class TodoList extends Component {

  render() {

  return (

  添加

  ---

  {this.props.list.map((item,index)=>{

  return (

• {item}

• );

  })}

  )

  }

  }

  const mapStateToProps = (state) =>{

  return {

  inputValue: state.inputValue,

  list:state.list

  }

  }

  const mapDispatchToProps = (dispatch) =>{

  return {

  changeInputValue(e){

  const action = {

  type:“change_inputvalue”,

  inputValue:e.target.value

  }

  dispatch(action);

  },

  addClick(){

  const action = {

  type:“add_list”,

  value:this.props.inputValue

  }

  dispatch(action);

  }

  }

  }

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

  第五步 在reducer中接收action的值

  const defaultState = {

  inputValue:‘hello’,

  list:[‘a’,‘b’,‘c’]

  }

  export default (state = defaultState,action) => {

  if(action.type === ‘change_inputvalue’){

  const newState = JSON.parse(JSON.stringify(state));

  newState.inputValue = action.inputValue;

  return newState;

  }

  if(action.type === ‘add_list’){

  const newState = JSON.parse(JSON.stringify(state));

  newState.list.push(action.value);

  newState.inputValue = “”;

  return newState;

  }

  return state

  }

  7、数据持久化

  ---

  安装依赖

  cnpm i redux-persist --save

  7.1、基本用法

  示例代码：

  const { browserHistory } = require(‘react-router’);

  const { syncHistoryWithStore, routerReducer } = require(‘react-router-redux’);

  const { createStore, combineReducers } = require(‘redux’);

  const { student,school } = require(‘./reducers’);

  // 只要用上 persistStore 和 autoRehydrate 就行啦

  const { persistStore, autoRehydrate } = require(‘redux-persist’);

  // 存储机制，可换成cookie等其他机制

  const { asyncSessionStorage } = require(‘redux-persist/storages’);

  const initialState = {

  student: {

  age: 21,

  sex: “female”,

  },

  school:{

  name: “蓝翔大学”

  }

  };

  const reducers = combineReducers({

  student,

  school,

  routing: routerReducer,

  });

  最后

  编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。