Rumah > Soal Jawab > teks badan
Selepas membaca banyak maklumat, saya masih tidak memahami Redux dengan baik
1 Untuk Negara global, yang diuruskan oleh Kedai, di manakah ia dijana pada mulanya? Bagaimanakah ia ditambah kemudian? Selepas menambah, adakah kesemuanya berada dalam {} yang sama? Pastikan semua atribut tidak mempunyai nama yang sama
2. Dalam mod Redux, adakah setiap komponen (komponen yang memerlukan keadaan) perlu diikat dengan connect( mapStateToProps ,mapDispatchToProps )(Component);
?
3. Adakah semua Reducer akan menerima Tindakan?
Kemudian kod yang saya tulis dalam keadaan terpinga-pinga tidak berfungsi dan tiada mesej ralat:
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'));
迷茫2017-05-19 10:35:34
Mendapati masalah. . . . Perangkap combineReducers Selepas menggunakannya, Negeri dibahagikan kepada Reducer masing-masing
阿神2017-05-19 10:35:34
Sebenarnya, redux adalah sangat mudah Tindakan mewakili tindakan yang diubah, dan pengurang sepadan mewakili kesan tindakan yang sepadan.
Menggunakan redux hanyalah ayat: komponen mana yang mempunyai perubahan data, penghantaran (tindakan) dalam komponen yang sepadan, dan komponen mana yang perlu menggunakan data dalam stor, lulus parameter mapStateToProps yang diperlukan untuk menyambung, kedua-duanya adalah bebas antara satu sama lain.
天蓬老师2017-05-19 10:35:34
1 Sebenarnya, lebih tepatnya, Reducer adalah tempat kedai ditakrifkan. Setiap Reducer boleh diasingkan dan kemudian digabungkan bersama menggunakan combineReducers.
2. Adalah disyorkan untuk hanya mengikat komponen peringkat tinggi, dan kemudian berinteraksi dengan komponen peringkat rendah melalui komponen peringkat tinggi.
3. Anda boleh menerima semuanya.
Adalah disyorkan untuk bermula dari Demo rasmi.
阿神2017-05-19 10:35:34
Selepas membaca banyak maklumat, saya masih tidak memahami Redux dengan baik 1. Untuk Negara global, yang diuruskan oleh Kedai, di manakah ia dijana pada mulanya? Bagaimanakah ia ditambah kemudian? Selepas menambah, adakah kesemuanya berada dalam {} yang sama? Adakah anda perlu memastikan bahawa semua atribut tidak mempunyai nama pendua. Jawapan: Data awal boleh dikonfigurasikan dalam parameter kedua createStore kedai. Saya tidak faham bahawa atribut anda diduakan.
2. Dalam mod Redux, adakah setiap komponen (komponen yang memerlukan keadaan) perlu diikat dengan
Tidak semestinya
3. Adakah semua Reducer akan menerima Tindakan?