Redux 学习笔记，web开发项目

3、TodoList案例

---

TodoList.js

import React,{Component} from ‘react’;

import store from ‘./store/index’;

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

class TodoList extends Component{

constructor(props){

super(props);

this.state = store.getState();

this.handleChange = this.handleChange.bind(this);

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

this.handleClick = this.handleClick.bind(this);

store.subscribe(this.handleStoreChange);

}

handleChange(e){

const action = {

type:CHANGE_INPUT_VALUE,

value:e.target.value

}

store.dispatch(action);

}

handleStoreChange(){

this.setState(store.getState());

}

handleClick(){

const action = {

type:ADD_TODO_ITEM

}

store.dispatch(action);

}

handleClickItem(index){

const action = {

type:DELETE_TODO_ITEM,

index:index

}

store.dispatch(action);

}

render(){

return (

提交

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

return (

• {item}

• );

  })}

  );

  }

  }

  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’));

  小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
  因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  
  
  
  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

  如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
  

  总结

  前端资料汇总

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  • 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

  • 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

  • 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

  • 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
    喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
    …(img-S9qZboYz-1711004222689)]

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

  如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
  [外链图片转存中…(img-NLEvGT2H-1711004222690)]

  总结

  前端资料汇总

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  • 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

  • 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

  • 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

  • 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
    喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！