看了許多資料對Redux還是不是很理解
1.對於全域的State,也就是Store所管理的,初始是在哪裡生成的?之後又是怎麼加進(jìn)去的?添加之後是不是都在同一個{}中得保證所有屬性不重名
2.在Redux模式下,是不是每個元件(需要state的元件)需要用connect( mapStateToProps ,mapDispatchToProps )(Component);
來綁定?
3.一個Action是不是所有Reducer都會收到?
然後就是自己在懵逼狀態(tài)下寫的一點程式碼跑不起來 也沒有錯誤提示:
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'));
光陰似箭催人老,日月如移越少年。
其實redux很簡單,一個action代表改變的動作,對應(yīng)的reducer代表對應(yīng)action的效果。
使用redux就是一句話:哪個元件發(fā)生資料改變就在對應(yīng)元件中dispatch(action),哪個元件需要使用store中的資料就傳入所需的mapStateToProps參數(shù)到connect,兩個互相獨立。
1、其實準(zhǔn)確來說Reducer就是定義store的地方??梢园衙總€Reducer分開來,然後最後用combineReducers組合在一起。
2、推薦只是高層的組件進(jìn)行綁定,後然低層級的透過高層級進(jìn)行互動。
3、都可以收到。
建議從官方的Demo進(jìn)行起步。
看了許多資料對Redux還是不是很理解1.對於全域的State,也就是Store所管理的,初始是在哪裡生成的? 之後又是怎麼加進(jìn)去的?新增之後是不是都在同一個{}中得保證所有屬性不重名
答:初始資料在createStore的第二個參數(shù)就可以配置,reducer會回傳一個新的state到store,沒有明白你的屬性重名是什麼意思
2.在Redux模式下,是不是每個元件(需要state的元件)需要用
connect( mapStateToProps ,mapDispatchToProps )(Component);來綁定?
不一定的
3.一個Action是不是所有Reducer都會收到?
每一個action都會觸發(fā)對應(yīng)的reducer