Redux background как изменить?

Question

[Tom111]

Всем привет.

Столкнулся с такой проблемой.

Answer 1

[Сергей Сунцев]

Ок, вот вы меняете состояние вашего стора. А где вы его используете?
Вот у вас есть state, вам нужно в компоненте так же, как и экшны его достать и использовать.

Comments

[Tom111]

можете подсказать, как это реализовать?

[Сергей Сунцев]

Вот тут вы выносите цвет в ваш стор
const mapStateToProps = (state) => ({state });
Далее получаете его из пропсов

const Counter = ({ actionRed,actionGreen, store }) => {

И далее используйте

[Tom111]

Вот что у меня получилось. Но так и не заработало

import React from "react";
import { connect } from "react-redux";

import { actionGreen, actionRed } from "../../actions/counter";

const Counter = ({ actionRed,actionGreen, state }) => {
    return (
        <div>
            <button onClick={actionRed} >Red</button>
            <button onClick={actionGreen} >Green</button>
        </div>
    );
}

const mapStateToProps = (state) => (state = { background: "red" });

const mapDispatchToProps = {
    actionRed,
    actionGreen
};

export const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter);
=========

const initialColor ={
    background: 'white'
}

const initialRed ={
    background: 'red'
}

const initialGreen ={
    background: 'green'
}

export const counterReducer = (state=initialColor, action) => {
    switch(action.type) {
        case "RED": {
            return {
                state:initialRed
            };
        }
        case "GREEN": {
            return {
                state:initialGreen.background
            }
        }
        default: {
            return state;
        }
    }
};

[Сергей Сунцев]

Tom111,

import React from "react";
import { connect } from "react-redux";

import { actionGreen, actionRed } from "../../actions/counter";

const Counter = ({ actionRed,actionGreen, state }) => {
    return (
        <div>
            <button onClick={actionRed} style={{backgroundColor: state}}>Red</button>
            <button onClick={actionGreen} style={{backgroundColor: state}}>Green</button>
        </div>
    );
}

const mapStateToProps = (state) => ({state });

const mapDispatchToProps = {
    actionRed,
    actionGreen
};

export const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter);
=========

const initialColor ={
    background: 'white'
}

const initialRed ={
    background: 'red'
}

const initialGreen ={
    background: 'green'
}

export const counterReducer = (state=initialColor.background, action) => {
    switch(action.type) {
        case "RED": {
            return {
                state:initialRed.background
            };
        }
        case "GREEN": {
            return {
                state:initialGreen.background
            }
        }
        default: {
            return state;
        }
    }
};

[Tom111]

К сожалению, так и не заработало. Вставил ваш код, но ничего не происходит. Ошибки тоже никакие не выдает.

Вот, в итоге что я имею.

import {GREEN, RED} from "../constants";


export const actionRed = () => ({
    type: RED
});


export const actionGreen = () => ({
    type: GREEN
});

========================
import { createStore } from "redux";

import { counterReducer } from "../reducers/counter";

export const store = createStore(counterReducer);

==============
import React from "react";
import { connect } from "react-redux";

import { actionGreen, actionRed } from "../../actions/counter";

const Counter = ({ actionRed,actionGreen, state }) => {
    return (
        <div>
            <button onClick={actionRed} style={{backgroundColor: state}}>Red</button>
            <button onClick={actionGreen} style={{backgroundColor: state}}>Green</button>
        </div>
    );
}

const mapStateToProps = (state) => ({state });

const mapDispatchToProps = {
    actionRed,
    actionGreen
};

export const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter);
============
const initialColor ={
    background: 'white'
}

const initialRed ={
    background: 'red'
}

const initialGreen ={
    background: 'green'
}

export const counterReducer = (state=initialColor.background, action) => {
    switch(action.type) {
        case "RED": {
            return {
                state:initialRed.background
            };
        }
        case "GREEN": {
            return {
                state:initialGreen.background
            }
        }
        default: {
            return state;
        }
    }
};

[Сергей Сунцев]

Посмотрите, чем state становится, через console.log к примеру, или через redux dev tools