redux的使用流程

蔚落 2021-12-11 23:47 309阅读 0赞

1 、安装

npm install --save redux

2、在src目录下新建index.js和reducer.js

index.js中

import { createStore } from 'redux'  //  引入createStore方法
    import reducer from './reducer'    
    const store = createStore(reducer) // 创建数据存储仓库
    export default store   //暴露出去

reducer.js中定义数据

const defaultState = {
        inputValue : 'Write Something',
        list:[
            '早上4点起床，锻炼身体',
            '中午下班游泳一小时'
        ]
    }
    export default (state = defaultState,action)=>{
        return state
    }

3、组件中使用

import store from './store/index' //引入
    
    //构造函数中获取数据
     constructor(props){
            super(props)
            this.state=store.getState();
     }
    
    
    //js中使用
    
    {
       {this.state.inputValue}}

3、store值的修改（input框触发方法）

onChange={this.changeInputValue}

方法内获取到输入的值，定义action，并通过`dispatch()`方法传递给`store`

changeInputValue(e){
        const action ={
            type:'changeInput',//这个值自定义
            value:e.target.value
        }
        store.dispatch(action)
    }

在reducer.js文件中，更改值

export default (state = defaultState,action)=>{
        if(action.type === 'changeInput'){
            let newState = JSON.parse(JSON.stringify(state)) //深度拷贝state
            newState.inputValue = action.value
            return newState
        }
        return state
    }

回到组件，在构造函数中订阅

constructor(props){
        super(props)
        this.storeChange = this.storeChange.bind(this)  //转变this指向
        store.subscribe(this.storeChange) //订阅Redux的状态
    }

在storeChange方法中重新获取store的数据

storeChange(){
         this.setState(store.getState())
     }

发表评论取消回复

表情：

评论列表（有 0 条评论，309人围观）

还没有评论，来说两句吧...

相关阅读

相关 reactjs教程：redux工作流程

![在这里插入图片描述][bb4358860942434e96339811de88defa.png] Redux是一种用于JavaScript应用程序的状态管理库，它遵循单

拼搏现实的明天。/ 2024年02月17日 13:16/ 0 赞/ 79 阅读

相关 P07:通过Input体验Redux的流程

Redux基础阐述增加 Input 响应事件源码创建 Action store 的自动推送策略让组件发生更新总

ゞ浴缸里的玫瑰/ 2023年10月06日 20:54/ 0 赞/ 45 阅读

相关 P02:Redux工作流程

阅读目录阐述 redux 官方图片我画的理解图总结阐述本文要学习的知识非常重要，你只有学会了Redux工作流程，你才能对Redu

缺乏、安全感/ 2023年10月06日 20:53/ 0 赞/ 78 阅读

相关 redux+react-redux实现购物流程

redux+react-redux实现购物流程在电商项目的开发过程中，会涉及到商品的下单与购买流程，大概流程如下： 1. 菜单购物车实时中显示商品数量 2. 在商

忘是亡心i/ 2023年10月06日 14:46/ 0 赞/ 38 阅读

相关 Redux工具包(一) - Redux Toolkit的基本使用

文章目录 Redux工具包的使用 Redux Toolkit介绍 Redux Toolkit基本使用 Redux

╰半橙微兮°/ 2023年10月02日 20:59/ 0 赞/ 42 阅读

相关如何理解Redux的工作流程？

1.Redux介绍 Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具（数据流框架）。随着JavaScript单页应用（SPA）开发日趋复杂，J

灰太狼/ 2022年12月14日 13:40/ 0 赞/ 180 阅读

相关 redux+react-redux实现购物流程

redux+react-redux实现购物流程在电商项目的开发过程中，会涉及到商品的下单与购买流程，大概流程如下： 1. 菜单购物车实时中显示商品数量 2. 在商

蔚落/ 2022年12月07日 01:12/ 0 赞/ 222 阅读

相关 Redux之redux-actions的使用

1：作用：当我们的在开发大型应用的时候，对于大量的action，我们的reducer需要些大量的swich来对action.type进行判断。 redux

快来打我*/ 2022年05月20日 09:04/ 0 赞/ 337 阅读

相关 redux 流程演绎

从基础开始深入，一步步的实现redux > 初始需求是完成对统一状态的数据的修改，想要达到的目的是修改状态数据，即可完成对页面显示数据的修改，但是直接对公共数据的修改是不

拼搏现实的明天。/ 2022年01月20日 03:15/ 0 赞/ 289 阅读

相关 redux的使用流程

1 、安装 npm install --save redux 2、在src目录下新建index.js和reducer.js index.js中 impo

蔚落/ 2021年12月11日 23:47/ 0 赞/ 310 阅读