javascript - 初學Redux的一些疑問

Question

看了許多資料對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 (
            <p>
                <p>
                    <p>{value1}</p>
                    <button onClick={onIncreaseClick}>Increase</button>
                    <button onClick={onDecreaseClick}>Decrease</button>
                </p>
                <p>
                    <p>{value2}</p>
                    <button onClick={onDoubleClick}>Double</button>
                    <button onClick={onResetClick}>Reset</button>
                </p>
            </p>
        )
    }
}
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'));

Answer 1

找到問題了。 。 。 。 combineReducers的坑 用了之後State被劃分到各自的Reducer去了

Answer 2

其實redux很簡單，一個action代表改變的動作，對應的reducer代表對應action的效果。
使用redux就是一句話：哪個元件發生資料改變就在對應元件中dispatch(action),哪個元件需要使用store中的資料就傳入所需的mapStateToProps參數到connect，兩個互相獨立。

Answer 3

1、其實準確來說Reducer就是定義store的地方。可以把每個Reducer分開來，然後最後用combineReducers組合在一起。
2、推薦只是高層的組件進行綁定，後然低層級的透過高層級進行互動。
3、都可以收到。

建議從官方的Demo進行起步。

Answer 4

http://huziketang.com/books/r...

Answer 5

看了許多資料對Redux還是不是很理解1.對於全域的State，也就是Store所管理的，初始是在哪裡生成的？ 之後又是怎麼加進去的？新增之後是不是都在同一個{}中得保證所有屬性不重名
答：初始資料在createStore的第二個參數就可以配置，reducer會回傳一個新的state到store，沒有明白你的屬性重名是什麼意思

2.在Redux模式下，是不是每個元件(需要state的元件)需要用
connect( mapStateToProps ,mapDispatchToProps )(Component);來綁定？
不一定的

3.一個Action是不是所有Reducer都會收到？
每一個action都會觸發對應的reducer