React进阶(2)-上手实践Redux-如何获取store的数据

时间 2020-01-18

标签 react 进阶上手实践 redux 如何获取 store 数据栏目 React 繁體版

原文原文链接

前言

在前面的一文理解Redux中,已经知道了Redux的工做流程以及Redux的设计基本原则,它就是一个用于管理组件的公共数据状态的数据层框架,包括了Store,Reducer,React Component,Actions Creators四个部分css

其中核心是Store,他们彼此之间的关系对于写Redux是很是重要的,宏观上讲:也能够将Redux=reducer+Flux的组合,代码就是文字描述的最佳的体现,解释react

你将在本文学习到npm

编写Redux的的基本流程json
如何获取store中公共的数据,并展现到页面上redux
如何更改store的公共数据,实现组件的数据与store的同步更新bash

....更多的细节见下文下面就一块儿来编写Redux代码的,如下是最终实现的效果图,添加,删除列表操做 antd

使用Ant-design布局todolist

对于初学者,一个简单的todolist例子对于入门redux是一个很是好的实践,这就比如刚写程序时的Hello-world的,虽然麻雀虽小,可是五胀俱全在React中要使用Redux时,必须先要在命令行终端下进行安装框架

使用npm或者cnpm,yarn(使用它时,须要先安装它,而后才可使用)进行安装

yarn add redux
或者
npm install --save redux
复制代码

安装完后,能够在根目录下package.json查看到redux,若是对应有,说明已经安装成功了的dom

ant-design的使用能够参考官方文档ant.design/docs/react/…
一样也是须要先安装,而后在项目中使用

yarn add antd
复制代码

而后在index.js中引入样式函数

import 'antd/dist/antd.css'
复制代码

固然你也能够按需加载组件的方式,具体配置能够参照官方文档如下是index.js代码

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

// TodoList组件
class TodoList extends React.Component {
	constructor(props){
		super(props);
		// 组件内部的初始化状态数据
		this.state = {
			inputValue: 'itclanCoder',  // input表单初始值
			list: ['itclanCoder', '川川', '学习Redux']         // 下方列表展现的数据
		}
	}
    render() {
        return (
            <div style={{ margin: "10px 0 0 10px"}}>
                    <div>
                        <Input value={this.state.inputValue} style={{ width:"300px",marginRight:"10px"}}  placeholder="请输入内容..." />
                        <Button type="primary">提交</Button>
                    </div>
                    <List
                      style={{ width: '300px',marginTop:'10px'}}
				      bordered
				      dataSource={this.state.list}
				      renderItem={item => <List.Item>{item}</List.Item>}/>
            </div>
        )
    }
}
const container = document.getElementById('root');

ReactDOM.render(<TodoList />, container);
复制代码

最终渲染的UI效果以下所示：

在控制台中能够多查看组件state的各个状态的,有助于理解React的在上面的代码中,咱们发现组件内部的状态数据是放在当前组件的state进行存储管理的,对于这种小的demo例子,杀鸡焉用宰牛刀使用Redux未免有些大才小用,可是若是组件很是的业务逻辑很是复杂,状态特别多,那么使用Redux的优势就很是明显了的

下面引入redux,一样可以达到一样的效果

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); // 建立好reducer后,须要将reducer做为参数传到createStore当中去,这样store才能拿到reducer的state数据

// 3. 建立reducer函数,管理组件共享的数据状态以及一些动做
// reducer是一个纯函数,返回一个新的state给store
// 4. 初始化state值,将原先组件内部的状态的数据,移除到reducer里面去管理
function reducer(state = {
	inputValue: 'itclanCoder',
	list: ['itclanCoder', '川川', '学习Redux']
}, action){
	return state;
}

// TodoList组件
class TodoList extends React.Component {
	constructor(props){
		super(props);
		// 5. 在组件内部经过getState()方法就能够拿到store里面的数据,该方法可以获取到store上存储的全部状态
		this.state = store.getState();
		
	}
    render() {
        return (
            <div style={{ margin: "10px 0 0 10px"}}>
                    <div>
                        <Input value={this.state.inputValue} style={{ width:"300px",marginRight:"10px"}}  placeholder="请输入内容..." />
                        <Button type="primary">提交</Button>
                    </div>
                    <List
                      style={{ width: '300px',marginTop:'10px'}}
				      bordered
				      dataSource={this.state.list}
				      renderItem={item => <List.Item>{item}</List.Item>}/>
            </div>
        )
    }
}
const container = document.getElementById('root');

ReactDOM.render(<TodoList />, container);
复制代码

上面的实例代码中,完成了将原先定义在组件内部的状态数据抽离到Redux中的reducer去管理,在当前组件内部经过getState()方法拿到state数据,最终渲染到页面上

梳理一下Redux的使用流程:

命令行终端下安装redux第三方库

yarn add redux
复制代码

在项目中引入redux库,同时建立一个store仓库,这是经过调用createStore函数实现的

import { createStore } from 'redux';
const store = createStore();   // 调用createStore函数才会真正的建立一个store
复制代码

建立reducer函数,用于存储公共组件的数据状态,它是一个纯函数,用于返回组件的状态

/*
 reducer是一个纯函数,接收两个参数,state和action其中state存储的就是组件的公共状态的,而action就是组件派发的动做,reducer的最终结果是由state和action共同决定的,后面会接着讲action
*/
function reducer(state, action){
    return state
}
复制代码

在reducer建立好以后,须要把reducer传递给createStore函数当中去,这样store就拿到了reducer里面的数据,这一步是必需要作的,不然就会拿不到reducer中state的数据

const store = createStore(reducer);
复制代码

组件内如何获取store中数据,经过调用getState方法获取store中的数据,该方法可以获取到store上存储的全部状态

this.state = store.getState();
复制代码

组件的渲染

<Input value={ this,sate,inputValue }>
<List dataSource={this.state.list} />
复制代码

上面的过程:其实完成的就是Redux工做流中的右边的内容

整个过程总结一句话就是:引入redux库,并调用createStore函数,从而建立了store,紧接着建立reducer函数,用于管理组件公共的状态数据,返回组件公共数据的最新的状态给store,而后将建立的reducer函数做为参数,让createStore函数接收.

进而store就获取到了reducer函数里面的公共存储数据,当组件外部想要拿store的公共数据时,因而引入store,并经过getState这个函数就能够获取store中的数据,最终可将数据渲染到页面上

总结

本文并非什么高大上的内容,主要是对学习Redux的一个小小的初探

用几句简单概括下:组件如何获取store中的数据

安装redux,而后从redux中引入createStore这个方法,并调用它,从而建立store,
紧着在建立reducer纯函数,在reducer里面进行state的逻辑操做,reducer的返回值取决于state与action这个的决定,最终该函数返回最新结果会返回给store,完成新旧数据的替换,
而在组件中如何获取store的数据,是经过getState方法进行获取store中的全部状态

那么如何保持页面的组件与store数据同步更新?添加,删除列表怎么实现呢?

将在下一节当中揭示了