Redux 学习笔记

最新推荐文章于 2024-06-29 15:39:50 发布

2401_84152126

最新推荐文章于 2024-06-29 15:39:50 发布

阅读量777

点赞数 26

分类专栏：程序员文章标签：学习笔记

本文链接：https://blog.csdn.net/2401_84152126/article/details/138480958

版权

程序员专栏收录该内容

190 篇文章 0 订阅

订阅专栏

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,

});

// autoRehydrate作为参数传入redux的createStore方法

const store = createStore(

reducers,

initialState,

autoRehydrate(),

);

// persistStore的使用，可配置很多参数，如存储引擎、黑白名单等。

persistStore(

store,

{

storage: asyncSessionStorage,

blacklist: [

‘routing’,

‘school’ // school reducer 的数据不进行持久化

],

},

);

const history = syncHistoryWithStore(browserHistory, store);

module.exports = {

store,

history,

};

7.2、整合react-redux

store/index.js 文件代码：

import { createStore, applyMiddleware, compose } from ‘redux’;

import reducers from ‘./reducers’;

import thunk from ‘redux-thunk’;

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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

7.2、整合react-redux

store/index.js 文件代码：

import { createStore, applyMiddleware, compose } from ‘redux’;

import reducers from ‘./reducers’;

import thunk from ‘redux-thunk’;

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-m5a3IpwM-1714951005220)]

[外链图片转存中…(img-1X59wiro-1714951005221)]

[外链图片转存中…(img-PNZLdgVv-1714951005221)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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

2401_84152126

关注

26
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Redux 学习笔记

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫