Текст не обновляется, когда я изменил свое состояние Redux

Question

У меня небольшая проблема, я впервые использую Redux, я пытаюсь просто отредактировать свой заголовок, поэтому у меня есть два компонента: (Я объяснил ниже, что я ожидал увидеть, но не получил его)

import React, { Component } from 'react';
import { connect } from "react-redux";
import { changeTitle } from "./redux/actions/changeTitle"
import { bindActionCreators } from "redux";

class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (
            <div>
                <h1>{this.props.myTitle}</h1>
                <button onClick={() => this.props.changeTitle("That")}>Change</button>
            </div>);
    }
}

function mapStateToProps(state) {
    return {
        myTitle: state.title
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        changeTitle: changeTitle
    }, dispatch)
}

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

Вот как я получаю заголовок в первый раз:

export default function titleReducer(state, action) {
    if (action.type !== "TITLE_CHANGED") {
        console.log(state);
        console.log(action);

        return "qlq"
    } else {
        return state
    }
}

Вот мой редуктор changeTitle:

export default function titleChangeReducer(state, action) {
    if (action.type === "TITLE_CHANGED") {
        console.log(state);
        console.log(action);

        return {
            title: "test again", ...state
        }
    }
    return [];
}

Итак, я ожидал, когда я изменю состояние, я получу изменения в моем представлении напрямую, но, честно говоря, я не знаю, даже если я изменил свое состояние, когда я нажимаю на кнопку, что мне дает console.log:

{title : "test again"} {type: "TITLE_CHANGED", полезная нагрузка: "That"}

Это мое действие по изменению заголовка:

export function changeTitle(toThat) {
    return {
        type: "TITLE_CHANGED",
        payload: toThat
    }
}

И вот как я объединил мои редукторы:

import { combineReducers } from "redux";
import titleReducer from "./titleReducer";
import titleChangeReducer from "./titleToChange";

const rootReducer = combineReducers({
    title: titleReducer,
    titleChanging: titleChangeReducer
})

export default rootReducer;

Если есть что-то еще, чтобы добавить ясность в вопрос, пожалуйста, попросите меня добавить его.

Любая помощь будет высоко ценится.

Answer 1

Если я понимаю ваш случай, я думаю, что вы должны удалить titleChangeReducer.

Затем просто измените свой существующий редуктор для обработки обновлений состояния. Примерно так:

export default function titleReducer(state, action) {
  if (action.type !== "TITLE_CHANGED") {
    return action.payload; // This will update your reducer state.
  } else {
    return state
  }
}

Не могу точно сказать, следует ли вам сохранить второй редуктор или нет, но если вам это нужно, вот несколько вещей, которые стоит рассмотреть.

1. Вы должны инициализировать свое состояние либо с помощью const, либо в объявлении: export default function titleReducer(state = [], action) {. Затем просто верните state вместо пустого массива в конце. В противном случае ваше состояние будет перезаписываться при каждой отправке действия.
2. Вы меняете типы данных. Ваше состояние по умолчанию - массив, но вы возвращаете объект для типа "TITLE_CHANGED". Держите их последовательными.