react-redux

1、Redux與組件

 

react-redux是一個第三方插件使咱們在react上更方便的來使用redux這個數據架構

 

React-Redux提供connect方法,用於從UI組件生成容器組件，connect的意思就是將兩種組件連起來

2、react-redux的基本用法

(1)、引入

import {Provider} from "react-redux";

在根組件外層嵌套一個Provider.   

Provider的做用就是將store傳遞給每個子組件，每個子組件就均可以使用store了，不須要重複的在組件中引入store

它能夠將store傳遞給包裹的全部的子元素  provider組件有一個屬性 store 用來接受store

(2)、connect進行鏈接

(1)、在子組件中引入connect

import { connect } from "react-redux";

 

(2)進行鏈接

export default connect(mapStateToProps)(組件名稱)

 

connect()():

第一個括號裏面有三個參數

第一個參數：mapStateToProps

解釋：

mapStateToProps其實就是一個規則，把store裏面的state映射到當前組件的 props中

第二個參數：mapDispatchToProps

解釋：

(1)、mapDispatcherToProps 這個方法用來修改數據，這個方法中有一個參數爲dispatch. 

(2)、若是說mapStateToProps是將store的數據拿到當前組件使用,那麼mapDispatcherToProps就是提升了一些方法讓你若是進行數據的修改(方法須要本身去寫，依舊要把action返回給Store)，這個方法被映射的this.props中。dispatch是用來發送action的

第二個括號:須要傳遞組件名稱

一、list.js

import React, { Component } from 'react'
import { connect } from "react-redux";
class List extends Component {
    render() {
        let { list } = this.props
        return (
            <div>
                <ul>
                    {
                        list.map((item, index) => (
                            <li key={index}>{item}
                                <button onClick={this.props.handleDel.bind(this, index)}>刪除</button>
                            </li>
                        ))
                    }
                </ul>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    list: state.getIn(["todo", "list"])
})

const mapDispatchToProps = (dispatch) => ({
    handleDel(index) {
        let action = {
            type: "DEL_ITEM",
            value: index
        }

        dispatch(action);
    }
})





export default connect(mapStateToProps, mapDispatchToProps)(List)

二、input.js

import React, { Component } from 'react'

import {connect} from "react-redux";

class Input extends Component {

render() {

return (

<div>

<input type="text" value={this.props.inputVal} onChange={this.props.handleChange.bind(this)}/>

<button onClick={this.props.handleAdd.bind(this)}>點擊</button>

</div>

)

}

}

const mapStateToProps = (state)=>({

inputVal:state.getIn(["todo","inputVal"])

})

const mapDispatchToProps = (dispatch)=>({

handleChange(e){

let val = e.target.value;

let action = {

type:"TODO_CHANGE",

value:val

}

dispatch(action);

},

handleAdd(){

let action = {

type:"TODO_ADD"

}

dispatch(action);

}

})

export default connect(mapStateToProps,mapDispatchToProps)(Input);

 

三、todoReducer.js

import immutable from "immutable";

const defaultState = immutable.fromJS({

inputVal: "123",

list: [111]

})

export default (state = defaultState, action) => {

switch (action.type) {

case "TODO_CHANGE":

return state.updateIn(["inputVal"], () => action.value);

case "TODO_ADD":

let newState = state.getIn(["list"]).push((state.getIn(["inputVal"])));

return state.updateIn(["list"], () => newState).updateIn(["inputVal"], () => "");

case "DEL_ITEM":

let arr = state.getIn(["list"]).toArray();

arr.splice(action.value,1);

return state.updateIn(["list"],()=>immutable.List(arr));

}

return state;

}

 

四、index.js

 

import {createStore} from "redux";

import {combineReducers} from "redux-immutable";

import num from "./reducer/numReducer";

import todo from "./reducer/todoReducer";

const reducer = combineReducers({

num,

todo

})

const store = createStore(reducer);

export default store;

 

五、APP.js

 

import React, { Component } from 'react';

import {connect} from "react-redux";

import List from "./components/list";

import Input from "./components/input";

class App extends Component {

render() {

return (

<div>

<h2>{this.props.n}</h2>

<button onClick={this.props.handleAdd.bind(this)}>修改數據</button>

<hr/>

<Input/>

<List/>

</div>

);

}

componentDidMount(){

 

}

}

const mapStateToProps = (state)=>({

n:state.getIn(["num","n"])

})

const mapDispatchToProps = (dispatch)=>({

handleAdd(){

dispatch(numAddAction());

}

})

export default connect(mapStateToProps,mapDispatchToProps)(App);

　　

mapStateToProps

做用：

創建一個從（外部的）state對象到（UI 組件的）props對象的映射關係。

mapStateToProps會訂閱 Store，每當state更新的時候，就會自動執行，從新計算 UI 組件的參數，從而觸發 UI 組件的從新渲染

 

調用的時候this.props.【key值】

 

mapDispatchToProps

做用：

用來創建 UI 組件的參數到store.dispatch方法的映射。也就是說，它定義了哪些用戶的操做應該看成 Action，傳給 Store。它能夠是一個函數，也能夠是一個對象

 

mapDispatchProps的用法

 

const mapDispatchProps = (dispatch)=>({

函數名稱:function(){

dispatch(action)

}

})

mapDispatchProps函數須要返回出去一個函數 這個函數中用dispatch傳遞一個action

 

最終子組件變成了UI組件 connect返回最終的容器組件，react-redux建議咱們把全部的數據都放在store中

 

調用：this.props.函數名稱()