首页 > 开发 > JS > 正文

初学Redux的一些疑问

2017-09-05 12:25:26  来源:网友分享

看了许多资料对Redux还是不是很理解
1.对于全局的State,也就是Store所管理的,初始是在哪里生成的? 之后又是怎么添加进去的?添加之后是不是都在同一个{}中得保证所有属性不重名

2.在Redux模式下,是不是每一个组件(需要state的组件)需要用
connect( mapStateToProps ,mapDispatchToProps )(Component);进行绑定?

3.一个Action是不是所有Reducer都会收到?

然后就是自己在懵逼状态下写的一点代码跑不起来 也没有错误提示:

import React from "react";import ReactDOM from "react-dom";import {createStore,bindActionCreators,combineReducers} from "redux";import {Provider,connect} from "react-redux";class Counter extends React.Component {    render() {        let { value1, onIncreaseClick, onDecreaseClick, value2, onDoubleClick, onResetClick } = this.props;        return (            <div>                <div>                    <p>{value1}</p>                    <button onClick={onIncreaseClick}>Increase</button>                    <button onClick={onDecreaseClick}>Decrease</button>                </div>                <div>                    <p>{value2}</p>                    <button onClick={onDoubleClick}>Double</button>                    <button onClick={onResetClick}>Reset</button>                </div>            </div>        )    }}function mapStateToProps(state) {    return { //obj        value1:state.count,        value2:state.count    }}function mapDispatchToProps(dispatch) {    return { //obj        onIncreaseClick(){            dispatch({type:"increase"});        },        onDecreaseClick(){            dispatch({type:"decrease"});        },        onDoubleClick(){            dispatch({type:"double"});        },        onResetClick(){            dispatch({type:"reset"});        }    }}function counter1(state = { count: 0 }, action) {    let count = state.count;    switch (action.type) {        case 'increase':            return { count: count + 1 };        case 'decrease':            return { count: count-1 };        default:            return state;    }}function counter2(state = { count: 0 }, action) {    let count = state.count;    switch (action.type) {        case 'double':            return { count: count*2 };        case 'reset':            return { count: 0 };        default:            return state;    }}let rootReducer = combineReducers({    counter1,    counter2});let store = createStore(rootReducer);let CounterCompo = connect(    mapStateToProps,    mapDispatchToProps)(Counter);ReactDOM.render(<Provider store={store}>    <CounterCompo/></Provider>,document.getElementById('container'));

解决方案

找到问题了。。。。combineReducers的坑 用了之后State被划分到各自的Reducer去了