Redux的使用

113 阅读1分钟

Redux

Redux是js状态容器,提供可预测化的状态管理

Redux的安装

npm install --save redux

在src下新建一个store文件夹,里面包含index.js reducer.js 两个文件
在reducer.js文件写入公共数据,创建一个reducer的方法,第一个参数state等于当前的公共数据,第二个参数action是一个容器 ,store根据action携带type在reducer中查询变更具体要执行的方法,执行返回新的state

//公共数据
const renducer=(state={
    inputVal:'1111',
    list:[1,2]
},action)=>{
    const newState={...state}
    switch (action.type) {
        case input_change :
        newState.inputVal=action.value
        default:
        return newState
    }
    return state
}
export default renducer

index.js中引入redux的createStore方法来生成store,在引入reducer.js

import renducer from "./reducer";
import {createStore} from 'redux'
const store=createStore(renducer)
export default store

store提供了几个方法供我们使用,下面我们常用的3个

store.dispatch();//改变状态,改变state的唯一方法  
store.getState();//获取整个状态树  
store.subscribe();//订阅一个函数,每当state改变时,都会去调用这个函数

在项目中引入store中的index.js
调用dispatch,通过action把变更的信息传递给reducer
代码如下:

import React, { Component } from 'react'
import store from './store'
export default class Demo01 extends Component {
    constructor(props){
        super(props)
        console.log(store);
        //赋值
        this.state=store.getState()
    }
    componentDidMount(){
    //当state改变时,调用这个函数
        store.subscribe(this.handleChangeState)
    }
    //定义一个函数
    handleChangeState=()=>{
        //修改值
        this.setState(store.getState())
    }
    changeInputVal=(e)=>{
        let action={
            type:'input_change',
            value:e.target.value
        }
        //调用dispatch,把action变更的信息传递给reducer
        store.dispatch(action)
    }
    render() {
        return (
        <div>
            <input value={this.state.inputVal} onChange={this.changeInputVal}/>
        </div>
        )
    }
}

8be8e702e3068e19045786f3bbe22ddd.jpeg