Redux-----React的好搭档!

Redux

    1.数据传递

        1.props

        2.回调

        3.相邻兄弟元素传递数据

    2.描述

        Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

    3.启示

        Redux 由 Flux 演变而来，但受 Elm 的启发，避开了 Flux 的复杂性。

    4.安装：

        npm install --save redux

        npm install --save react-redux

        npm install --save-dev redux-devtools 

        附加：debugger

    5.要点

        store:仓库

        actions:动作(事件)

        state:状态

        reducers:描述动作(事件),修改状态的地方

    6.实现React-Redux

        store:

            import { createStore } from 'redux'

            import userinfo from "../reducers/userinfo"

            export default function configureStore(){

                const store = createStore(userinfo);

                return store;

            }

        reducers:

            const initState = {};

            export default function userinfo(state = initState, action) {

                switch (action.type) {

                    case "LOGIN":

                        return state = action.data;

                    case "UPDATE":

                        return state = action.data;

                    default:

                        return state

                }

            }

            import { combineReducers } from "redux"

            import userinfo from "./userinfo"

            const rootReducer = combineReducers({

                userinfo

            })

export default rootReducer

        actions:

            export function login(data){

                return{

                    type:"LOGIN",

                    data

                }

            }

            export function update(data){

                return{

                    type:"UPDATE",

                    data

                }

            }

    7.关联Redux

        index.js

            import { Provider } from "react-redux"

            import configureStore from "./configureStore/configureStore"

            const store = configureStore();

            ReactDOM.render(

                <Provider store={ store }>

                    <App />

                </Provider>

                , document.getElementById('root'));

        App.js

            import { connect } from "react-redux"

            import { bindActionCreators } from "redux"

            import * as actionsType from "../../actions/userinfo"

            componentDidMount(){

                // 调用redux中actions的方法

                this.props.actionsType.login({

                    nick:"iwen",

                    age:20

                })

            }

            function mapStateToProps(state){

                return{

                    userinfo:state.userinfo

                }

            }

            // 写

            function mapDispatchToProps(dispatch){

                return{

                    actionsType:bindActionCreators(actionsType,dispatch)

                }

            }

            export default connect(

                mapStateToProps,

                mapDispatchToProps

            )(App);