看了许多资料对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去了