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.函数名称()