javascript - Quelques questions pour les débutants qui apprennent Redux

Question

Après avoir lu beaucoup d'informations, je ne comprends toujours pas très bien Redux
1 Pour l'État global, qui est géré par le Store, où est-il initialement généré ? Comment a-t-il été ajouté plus tard ? Après l'ajout, sont-ils tous dans le même {} ? Assurez-vous que tous les attributs n'ont pas le même nom

2. En mode Redux, chaque composant (composant qui nécessite un état) doit-il être lié à
connect( mapStateToProps ,mapDispatchToProps )(Component); ?

3. Tous les réducteurs recevront-ils une action ?

Ensuite, le code que j'ai écrit dans un état second n'a pas fonctionné et il n'y a eu aucun message d'erreur :

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

J'ai trouvé le problème. . . . Pièges des combineReducers Après l'avoir utilisé, l'État est divisé en Réducteurs respectifs

Answer 2

En fait, redux est très simple. Une action représente l'action modifiée, et le réducteur correspondant représente l'effet de l'action correspondante.
Utiliser redux n'est qu'une phrase : quel que soit le composant qui modifie les données, répartissez (action) dans le composant correspondant, quel que soit le composant qui doit utiliser les données dans le magasin, transmettez le paramètre mapStateToProps requis pour vous connecter, les deux sont indépendants l'un de l'autre.

Answer 3

1. En fait, pour être précis, Réducteur est l'endroit où le magasin est défini. Chaque réducteur peut être séparé puis combiné à l'aide de combineReducers.
2. Il est recommandé de lier uniquement les composants de haut niveau, puis d'interagir avec les composants de bas niveau via des composants de haut niveau.
3. Vous pouvez tout recevoir.

Il est recommandé de partir de la démo officielle.

Answer 4

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

Answer 5

Après avoir lu beaucoup d'informations, je ne comprends toujours pas très bien Redux 1. Pour l'État global, qui est géré par le Store, où est-il initialement généré ? Comment a-t-il été ajouté plus tard ? Après l'ajout, sont-ils tous dans le même {} ? Devez-vous vous assurer que tous les attributs n'ont pas de noms en double ? Réponse : Les données initiales peuvent être configurées dans le deuxième paramètre de createStore. store. Je n'ai pas compris que vos attributs sont dupliqués. Que signifie le nom ?
2. En mode Redux, chaque composant (composant qui nécessite un état) doit-il être lié à

connect( mapStateToProps , mapDispatchToProps )(Component);?

Pas nécessairement

3. Tous les réducteurs recevront-ils une action ?

Chaque action déclenchera le réducteur correspondant