Mike_Ro
@Mike_Ro
Python, JS, WordPress, SEO, Bots, Adversting

ReactJS и combineReducers, в чем ошибка?

Без использования combineReducers, используя один редьюсер - все работает нормально. Потребовалось разделить редьюсеры, использовал combineReducers, вроде бы все сделал по инструкции, но все равно возникает ошибка, поиск ошибки результатов не дал.

/src/index.js :
import React from "react";
import ReactDOM from "react-dom";
import {createStore} from "redux";
import {Provider} from "react-redux";

import reducersRoot from "./reducers";

const stateInitial = {count: 0}
const store = createStore(reducersRoot, stateInitial);

import AppCounter from "./AppCounter";

ReactDOM.render(
    <Provider store={store}>
        <AppCounter/>
    </Provider>,
    document.getElementById("root")
);


/src/AppCounter.js :
import React from "react";

import ContainerCounter from "./containers/Counter";

const AppCounter = () => (
    <ContainerCounter/>
);

export default AppCounter;


/src/reducers/index.js :
import {combineReducers} from "redux";

import reducerCounter from "./counter";

export default combineReducers({
    count: reducerCounter
});


/src/reducers/counter.js :
import * as actions from "../actions";

const counter = (state = {}, action) => {

    if(action.type === actions.COUNTER_DECREMENT) {
        return {count: state.count - action.count};

    } else if(action.type === actions.COUNTER_INCREMENT) {
        return {count: state.count + action.count};
    
    } else if(action.type === actions.COUNTER_RESET) {
        return {count: action.count};

    } return state;

}

export default counter;


/src/containers/Counter.js :
import {connect} from "react-redux";

import {countDecrement, countIncrement, countReset} from "../actions";
import ComponentCounter from "../components/Counter";

const mapStateToProps = state => ({
    count: state.count
});

const mapDispatchToProps = dispatch => ({

    onCountDecrement: (event, count) => {
        event.preventDefault();
        dispatch(countDecrement(count));
    },

    onCountIncrement: (event, count) => {
        event.preventDefault();
        dispatch(countIncrement(count));
    },

    onCountReset: event => {
        event.preventDefault();
        dispatch(countReset());
    }

});

export default connect(mapStateToProps, mapDispatchToProps)(ComponentCounter);


/src/components/Counter.js :
import React from "react";

const Counter = props => {

    const refInput = React.createRef();

    return (
        <>
            <h1>{props.count}</h1>
            <a href="#" onClick={event => props.onCountDecrement(event, parseInt(refInput.current.value))}>Минус</a>
            <a style={{"margin": "0 10px"}} href="#" onClick={event => props.onCountReset(event)}>Reset</a>
            <a href="#" onClick={event => props.onCountIncrement(event, parseInt(refInput.current.value))}>Плюс</a>
            <p>
                <input type="number" ref={refInput} defaultValue="1"/>
            </p>
        </>
    );
}

export default Counter;
  • Вопрос задан
  • 131 просмотр
Решения вопроса 1
rockon404
@rockon404 Куратор тега Redux
Frontend Developer
У вас путь от корня хранилища до значения теперь не state.count, а state.count.count.
Рекомендую установить расширение Redux Dev Tools и добавить в проект.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы