React進階(2)-上手實踐Redux,如何獲取store中的數(shù)據(jù)

前言

在前面的一文理解Redux中,已經(jīng)知道了Redux的工作流程以及Redux的設計基本原則,它就是一個用于管理組件的公共數(shù)據(jù)狀態(tài)的數(shù)據(jù)層框架,包括了Store,Reducer,React Component,Actions Creators四個部分

其中核心是Store,他們彼此之間的關系對于寫Redux是非常重要的,宏觀上講:也可以將Redux=reducer+Flux的組合,代碼就是文字描述的最佳的體現(xiàn),解釋

你將在本文學習到

  • 編寫Redux的的基本流程

  • 如何獲取store中公共的數(shù)據(jù),并展示到頁面上

  • 如何更改store的公共數(shù)據(jù),實現(xiàn)組件的數(shù)據(jù)與store的同步更新

....更多的細節(jié)見下文
下面就一起來編寫Redux代碼的,以下是最終實現(xiàn)的效果圖,添加,刪除列表操作


todolist操作,最終效果.gif

使用Ant-design布局todolist

對于初學者,一個簡單的todolist例子對于入門redux是一個非常好的實踐,這就好比剛寫程序時的Hello-world的,雖然麻雀雖小,但是五脹俱全
在React中要使用Redux時,必須先要在命令行終端下進行安裝

  • 使用npm或者cnpm,yarn(使用它時,需要先安裝它,然后才可以使用)進行安裝
yarn add redux
或者
npm install --save redux

安裝完后,可以在根目錄下package.json查看到redux,如果對應有,說明已經(jīng)安裝成功了的

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);
        // 組件內(nèi)部的初始化狀態(tài)數(shù)據(jù)
        this.state = {
            inputValue: 'itclanCoder',  // input表單初始值
            list: ['itclanCoder', '川川', '學習Redux']         // 下方列表展示的數(shù)據(jù)
        }
    }
    render() {
        return (
            <div style={{ margin: "10px 0 0 10px"}}>
                    <div>
                        <Input value={this.state.inputValue} style={{ width:"300px",marginRight:"10px"}}  placeholder="請輸入內(nèi)容..." />
                        <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效果如下所示：


展示的效果.png

在控制臺中可以多查看組件state的各個狀態(tài)的,有助于理解React的
在上面的代碼中,我們發(fā)現(xiàn)組件內(nèi)部的狀態(tài)數(shù)據(jù)是放在當前組件的state進行存儲管理的,對于這種小的demo例子,殺雞焉用宰牛刀使用Redux未免有些大才小用,但是如果組件非常的業(yè)務邏輯非常復雜,狀態(tài)特別多,那么使用Redux的優(yōu)點就非常明顯了的

下面引入redux,同樣能夠達到同樣的效果


深刻理解Redux工作流.png
import React from 'react';
import ReactDOM from 'react-dom';
import { Input, Button, List } from 'antd'; // 引入antd組件庫
import 'antd/dist/antd.css'; // 引入antd樣式

// 1. 創(chuàng)建一個store管理倉庫,從redux庫中引入一個createStore函數(shù)
import { createStore } from 'redux';

// 2. 引入createStore后,store并沒有創(chuàng)建,需要調(diào)用createStore()后才有store
const store = createStore(reducer); // 創(chuàng)建好reducer后,需要將reducer作為參數(shù)傳到createStore當中去,這樣store才能拿到reducer的state數(shù)據(jù)

// 3. 創(chuàng)建reducer函數(shù),管理組件共享的數(shù)據(jù)狀態(tài)以及一些動作
// reducer是一個純函數(shù),返回一個新的state給store
// 4. 初始化state值,將原先組件內(nèi)部的狀態(tài)的數(shù)據(jù),移除到reducer里面去管理
function reducer(state = {
    inputValue: 'itclanCoder',
    list: ['itclanCoder', '川川', '學習Redux']
}, action){
    return state;
}

// TodoList組件
class TodoList extends React.Component {
    constructor(props){
        super(props);
        // 5. 在組件內(nèi)部通過getState()方法就可以拿到store里面的數(shù)據(jù),該方法能夠獲取到store上存儲的所有狀態(tài)
        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="請輸入內(nèi)容..." />
                        <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);

上面的實例代碼中,完成了將原先定義在組件內(nèi)部的狀態(tài)數(shù)據(jù)抽離到Redux中的reducer去管理,在當前組件內(nèi)部通過getState()方法拿到state數(shù)據(jù),最終渲染到頁面上

梳理一下Redux的使用流程:

  1. 命令行終端下安裝redux第三方庫
yarn add redux
  1. 在項目中引入redux庫,同時創(chuàng)建一個store倉庫,這是通過調(diào)用createStore函數(shù)實現(xiàn)的
import { createStore } from 'redux';
const store = createStore();   // 調(diào)用createStore函數(shù)才會真正的創(chuàng)建一個store
  1. 創(chuàng)建reducer函數(shù),用于存儲公共組件的數(shù)據(jù)狀態(tài),它是一個純函數(shù),用于返回組件的狀態(tài)
/*
 reducer是一個純函數(shù),接收兩個參數(shù),state和action其中state存儲的就是組件的公共狀態(tài)的,而action就是組件派發(fā)的動作,reducer的最終結(jié)果是由state和action共同決定的,后面會接著講action
*/
function reducer(state, action){
    return state
}
  1. 在reducer創(chuàng)建好之后,需要把reducer傳遞給createStore函數(shù)當中去,這樣store就拿到了reducer里面的數(shù)據(jù),這一步是必須要做的,否則就會拿不到reducer中state的數(shù)據(jù)
const store = createStore(reducer);
  1. 組件內(nèi)如何獲取store中數(shù)據(jù),通過調(diào)用getState方法獲取store中的數(shù)據(jù),該方法能夠獲取到store上存儲的所有狀態(tài)
this.state = store.getState();
  1. 組件的渲染
<Input value={ this,sate,inputValue }>
<List dataSource={this.state.list} />

上面的過程:其實完成的就是Redux工作流中的右邊的內(nèi)容


Redux工作流-store創(chuàng)建與獲取.png

整個過程總結(jié)一句話就是:引入redux庫,并調(diào)用createStore函數(shù),從而創(chuàng)建了store,緊接著創(chuàng)建reducer函數(shù),用于管理組件公共的狀態(tài)數(shù)據(jù),返回組件公共數(shù)據(jù)的最新的狀態(tài)給store,然后將創(chuàng)建的reducer函數(shù)作為參數(shù),讓createStore函數(shù)接收.

進而store就獲取到了reducer函數(shù)里面的公共存儲數(shù)據(jù),當組件外部想要拿store的公共數(shù)據(jù)時,于是引入store,并通過getState這個函數(shù)就可以獲取store中的數(shù)據(jù),最終可將數(shù)據(jù)渲染到頁面上

總結(jié)

本文并不是什么高大上的內(nèi)容,主要是對學習Redux的一個小小的初探

用幾句簡單歸納下:組件如何獲取store中的數(shù)據(jù)

  • 安裝redux,然后從redux中引入createStore這個方法,并調(diào)用它,從而創(chuàng)建store,

  • 緊著在創(chuàng)建reducer純函數(shù),在reducer里面進行state的邏輯操作,reducer的返回值取決于state與action這個的決定,最終該函數(shù)返回最新結(jié)果會返回給store,完成新舊數(shù)據(jù)的替換,

  • 而在組件中如何獲取store的數(shù)據(jù),是通過getState方法進行獲取store中的所有狀態(tài)

那么如何保持頁面的組件與store數(shù)據(jù)同步更新?添加,刪除列表怎么實現(xiàn)呢?

將在下一節(jié)當中揭示了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容