react-redux使用

安装react-redux

npm i react-redux

Provider

react-redux 提供的一个 React 组件,使用内部所有的组件都可以获取到store里面的内容  

Provider提供的是一个顶层容器的作用，实现store的上下文传递。 

render() {
        return (
            <Provider store={store}>
                <div>
                    <Compon></Compon>
                </div>
            </Provider>

        );
    }

connect是什么？

连接 React 组件与 Redux store。

connect中包含API

connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {})

mapStateToProps把store的数据映射到组件的props中

const mapStateToProps = (state) => {
    //这里的state就是store中的数据
    return {
        value: state.value,
        list: state.list
    }
}
export default connect(mapStateToProps, null)(Compon);

mapDispatchToProps把store.dispatch映射到props中

//把store.dispatch映射到props中
const mapDispatchToProps = (dispatch) => {
    return {
        change_val(e) {
            //派发事件，并传递参数
            dispatch(changeVal(e.target.value))
        },
        handleClick() {
            dispatch(add_list())
        },
        deleteHandle(index) {
            console.log(index)
            dispatch(deleteList(index))
        }

    }
}

完整代码如下：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { changeVal, add_list, deleteList } from '../store/actions'
class Compon extends Component {
    curstructor(props) {


    }

    render() {
        const { value, change_val, handleClick, deleteHandle } = this.props;
        return (
            <div>
                <div>
                    <input type="text" value={value} onChange={change_val} />
                    <button onClick={handleClick}>添加</button>
                </div>
                <ul>
                    {

                        this.props.list.map((item, index) => {
                            return <li key={item + index}>{item}<button onClick={this.delete_item.bind(this, index)} >删除</button></li>
                        })
                    }
                </ul>
            </div>
        )
    }
    //删除
    delete_item(index) {
        this.props.deleteHandle(index)

    }

}
const mapStateToProps = (state) => {
    //这里的state就是store中的数据

    return {
        value: state.value,
        list: state.list
    }
}
//把store.dispatch映射到props中
const mapDispatchToProps = (dispatch) => {
    return {
        change_val(e) {
            //派发事件，并传递参数
            dispatch(changeVal(e.target.value))
        },
        handleClick() {
            dispatch(add_list())
        },
        deleteHandle(index) {
            console.log(index)
            dispatch(deleteList(index))
        }

    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Compon);

多个reducer合并

import { combineReducers } from 'redux';
import header_reducer from './reducer_header'
export default combineReducers({
    header: header_reducer
})