初学Redux的一些疑问

看了许多资料对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'));
阅读 3.6k
5 个回答

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

其实redux很简单,一个action代表发生改变的动作,对应的reducer代表对应action的效果。
使用redux就是一句话:哪个组件发生数据改变就在对应组件中dispatch(action),哪个组件需要使用store中的数据就传入需要的mapStateToProps参数到connect,两个相互独立。

1、其实准确来说Reducer就是定义store的地方。可以把每个Reducer分开来,然后最后用combineReducers组合在一起。
2、推荐只是高层级的组件进行绑定,后然低层级的通过高层级进行交互。
3、都可以收到。

建议从官方的Demo进行起步。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题