Redux的基本使用

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

介绍

或者可以用图书馆案例来理解

图片来源与技术胖 jspang.com

安装 redux

• npm 安装

// npm 安装
npm install --save redux

• yarn 安装

// yarn 安装
yarn add redux

创建 store 数据仓库

安装好redux之后，在src目录下创建一个store文件夹,然后在文件夹下创建一个index.js文件。

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

再创建一个文件 reducer.js 文件用于管理数据

// reducer.js
const defaultState = {}  //默认数据
export default (state = defaultState,action)=>{  //就是一个方法函数
    return state
}

最后将在 index.js 中引入 reducer.js

// index.js
import reducer from './reducer'
const store = createStore({
    reducer,
    //用于 redux dev tools 调试
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()  
})

在组件中使用仓库

读取数据

首先引入仓库，根据组件的位置不同，路径可能不太一样，根据实际需求来

import store from './store/index'

将仓库里的数据赋值给组件的 state 数据

this.state=store.getState()

修改数据

想改变Redux里边State的值就要创建Action了。Action就是一个对象，这个对象一般有两个属性，第一个是对Action的描述，第二个是要改变的值。

const action ={
    type:'标识名称/方法名称',
    value:'需要传递的参数'
}
store.dispatch(action)

然后在 reducer.js 中去接收这个参数

// reducer.js
export default (state = defaultState,action)=>{
    if(action.type === '标识名称/方法名称'){

        let newState = JSON.parse(JSON.stringify(state)) // 深度拷贝state

        // action.value 是传递过来的参数
        newState.inputValue = action.value

        return newState
    }
    return state
}

做完这一步还不够，还需要让组件进行更新

//----------关键代码-----------start
this.storeChange = this.storeChange.bind(this)  //转变this指向
store.subscribe(this.storeChange) //订阅Redux的状态
//----------关键代码-----------end

storeChange () {
    // 重新setState一次就可以实现组件也是变化的。在代码的最下方，编写storeChange方法。
    this.setState(store.getState())
}

🎉基础部分就是这样啦