初識react(三)在 react中使用redux來實現簡版計數器

時間 2019-11-24

標籤 react 使用 redux 實現計數器欄目 React 简体版

原文原文鏈接

回顧

上篇文章已經把redux核心概念講明白了，這裏就不在廢話啦，不瞭解的能夠先去回顧下，接下來咱們講解下在react中如何使用redux，來實現一個簡單計數器html

先把目錄結構搭好

下面咱們講解下每一個文件的做用，而後在一個一個實現react

actions->counter.js存放計數器的動做
reducers->index.js是主入口文件，由於可能有好多個reducer。
reducers->counter.js存放計數器的reducer
action-types.js 存放宏，玩遊戲的確定知道，保存動做的類型
store->index.js 是整個store對外暴露的入口文件

讀過上篇文章後，對這種目錄結構可能還不清楚具體的做用，可是對這些redux中概念確定已經明白，下面咱們一個一個文件開始講解git

1、編寫store部分

一、編寫最簡單的store/action-types.js文件

是一個宏文件，保存計數器動做的類型，說白了就是加、減操做。貼代碼看的更具體

// action-types
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
複製代碼

宏文件不是必須的，可是它好處是結構清晰，一目瞭然能夠看到計數器全部動做的類型github

二、編寫reducers/counter.js文件

是一個計數器的reducer，reducers目錄下可能有不少個reducer,咱們先寫一個

import * as Types from "../action-types"; //引入動做類型
let initState = {  //聲明一個初始的狀態
    number:0
};
function counter(state = initState, action) {   //接收state和action兩個參數,並給state賦予初始值
    switch (action.type) {  //判斷動做類型
        case Types.INCREMENT: //action相似這種結構{type:'INCREMENT'，count:5}
            return {number:state.number+action.count};
        case Types.DECREMENT:
            return {number:state.number-action.count};
    }
    return state    
}
export default counter

複製代碼

跟咱們上篇文章寫的reducer如出一轍，只不過咱們把它抽離出來，讓結構清晰redux

三、編寫reducers/index.js文件

因爲咱們只有一個計數器的reducer，因此默認導出就能夠。當有多個reducer，會在這個文件進行合併，後面再講。

import counter from "./counter"; //默認導入reducer
export default counter      //默認導出
複製代碼

在囉嗦一句，主要是爲了之後方便擴展多個reducer，因此纔會有reducers/index.js這個主文件bash

四、編寫actions/counters.js

把派發的動做抽離出來，用於來組件中調用

import * as Types from "../action-types"; //引入宏
let actions = {
    add(num){ //add方法會在組件內部調用，返回action對象
        return {type:Types.INCREMENT,count:num}
    },
    minus(num){
        return {type:Types.DECREMENT,count:num}
    }
};
export default actions
複製代碼

五、編寫store/index.js，倉庫的主文件

這個文件主要用於導出store，提供給組件使用

import {createStore} from 'redux';
import reducer from "./reducers"
let store = createStore(reducer); //建立store
export default store;
複製代碼

截止到目前爲止，store文件已經所有寫完。下面咱們開始寫組件部分，讓倉庫中數據給組件使用dom

2、組件調用部分

一、編寫react的主入口文件，即 src/index.js

使用react-redux庫，來實現store和組件之間的通訊
react-redux提供了2個核心API， Provider 提供 connect 連接
Provider是一個組件，在react入口文件中用於提供store。
connect含義是，在react組件內部鏈接store，進而實現組件與redux之間通訊

怪我不能給你們講明白，咱們仍是看代碼逐句解釋異步

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from "./components/Counter";
import store from "./store";
//引入react-redux中的Provider組件，用於
import {Provider} from "react-redux";

ReactDOM.render(
    <Provider store = {store}>
        <div>
            <Counter />
        </div>
    </Provider>, document.getElementById('root'));

複製代碼

二、編寫Counter組件

組件中用到connect方法，實現組件與redux之間通訊，connect方法接受2參數。connect(mapStateToProps,actions)(Counter)
把store/actions.js導出的對象綁定到組件的屬性中，組件內部能夠經過this.props拿到對應的actions

import React from "react";
import store from "../store";
import * as Types from "../store/action-types"
//生成action的對象的方法叫actionCreator
import actions from "../store/actions/counter";
import {connect} from "react-redux";
class Counter extends React.Component {
    render() {
        console.log(this.props);
        return (
            <div>
             <div>{this.props.number}</div>
                <button onClick={()=>{
                    this.props.add(5)
                }}>+</button>
                <button onClick={()=>{
                    this.props.minus(1)
                }}>-</button>
            </div>
            )
    }
}
let mapStateToProps = (state)=>{ //state表明的store.getState()
    return {...state}
};

export default connect(mapStateToProps,actions)(Counter)   
複製代碼