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數據同步更新?添加,刪除列表怎麼實現呢?

將在下一節當中揭示了