React进阶(3)-上手实践Redux-如何改变store中的数据

虽互不曾谋面,但希望能和你成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

（祝今日天下有情人终成兄妹)

撰文 | 川川

VX-ID:suibichuanji

什么?文章内容不够看,等等..

点击文末左下方阅读原文,可看视频学习

   

前言

在前面的一文React进阶(2)-上手实践Redux-如何获取store的数据当中,已经知道组件怎么获取store的数据,并渲染到页面上,那么在该节当中揭示怎么更改store的数据,实现页面的更新

您将在本文当中学到

• 编写action代码,确定具体要做的事情,它只负责创建对象

• 改变store数据的唯一方法就是要派发action,需要通过调用store.dispatch函数

• reducer纯函数中实现数据更新等逻辑判断操作 
  

• 触发store,注册订阅subscribe函数,监听store数据的变化,保持页面的状态与store的同步

• 重新获取store的数据,最终实现页面数据状态的更新

......

文章内容略有些长,建议扯纸的时间阅读,比较基础,如理解有误,欢迎路过的老师多提意见和指正

下面就一起来编写todolist的添加,删除等代码的,最终的效果图如下所示

(添加,删除todolist操作)

如何改变store的数据,实现页面的更新？

在前文的示例代码中已经知道组件怎么从store中取数据了,然而现在,如果想要更新state的数据?怎么办?

在reducer函数接收的第二个参数action就是接下来要干的事情了

在Redux中为了能够查看store中的各个状态,在chrome浏览器需先安装一个redux Devtools这个调试工具

当然安装这个插件,需要科学上网.如果没有的话,在qq浏览器的插件市场里也是能够找得到的

qq浏览器各种插件也是应有尽有,与在chrome控制台里调试是一样的

方式一:创建store的时候,进行composeEnhancers构建增强型的应用,在代码里添加配置,将window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),这行代码配置添加到createStore()的第二个参数上

const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); // createStore第二个参数添加这个redux-devtools的配置可以开启调试功能

(需要浏览器安装redux-devtools插件)

（需要按照文档,对创建的store仓库配置一下）

（配置完后,刷新浏览器Redux调试工具就会出现了）

方法二:终端下安装redux-devtools-extension

npm install --save redux-devtools-extension

然后在主页面入口代码里,添加redux-devtools-extension拓展,同时引入applyMiddleware应用中间件,并在componseWidthDevTools中调用,如下所示

import { createStore, applyMiddleware } from 'redux'; 
import { composeWithDevTools } from 'redux-devtools-extension';
 
const store = createStore(reducer, composeWithDevTools(
  applyMiddleware()
));

以上两种方法都可以开启Redux的调试功能,第二种方法比较强大,推荐使用,这种配置完后,在各个浏览器都是可以使用的,至于其他一些额外拓展功能的,在后续的文章中,会不断会讲到

具体更改store的实例代码如下所示:

import React from 'react';
import ReactDOM from 'react-dom';
import { Input, Button, List } from 'antd'; // 引入antd组件库
import 'antd/dist/antd.css'; // 引入antd样式

// 1. 创建一个store管理仓库,从redux库中引入一个createStore函数
import { createStore } from 'redux';

// 2. 引入createStore后,store并没有创建,需要调用createStore()后才有store
const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); // 创建好reducer后,需要将reducer作为参数传到createStore当中去,这样store才能拿到reducer的state数据

// 3. 创建reducer函数,管理组件共享的数据状态以及一些动作
// reducer是一个纯函数,返回一个新的state给store
// 4. 初始化state值,将原先组件内部的状态的数据,移除到reducer里面去管理
function reducer(state = {
    inputValue: 'itclanCoder',
    list: ['itclanCoder', '川川', '学习Redux']
}, action){
    console.log(state, action);
    if(action.type === 'handle_Input_Change'){
        // 对原有的上一次的state做一次深拷贝,在Redux中,reducer不允许直接修改state
      // const newState = Object.assign({}, state);这个Object.assign()也是一个非常常用浅拷贝的方法,与下面的方法最终实现的效果是一致的,等价于下面的方法
      // 创建了一个newState完全复制了state,通过对newState的修改避免了对state的修改
        const newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.value; // 将新的value值赋值给newState
        return newState;
    }
    return state;
}

// TodoList组件
class TodoList extends React.Component {
    constructor(props){
        super(props);
        // 5. 在组件内部通过getState()方法就可以拿到store里面的数据
        this.state = store.getState();
        // this环境的绑定
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleStoreChange = this.handleStoreChange.bind(this);
        // 触发订阅,让store感知到state的变化
        store.subscribe(this.handleStoreChange); // 接收一个函数,重新获取store最新的数据,subscribe里面必须接收一个函数,会自动的调用this.handleStoreChange这个方法,保持store上的状态和this.state的