javascript - Beberapa soalan untuk pemula belajar Redux

Question

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'));

Answer 1

Mendapati masalah. . . . Perangkap combineReducers Selepas menggunakannya, Negeri dibahagikan kepada Reducer masing-masing

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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

connect( mapStateToProps , mapDispatchToProps )(Component);?

Tidak semestinya

3. Adakah semua Reducer akan menerima Tindakan?

Setiap tindakan akan mencetuskan pengurangan yang sepadan