Question

我有一个小问题，这是我第一次使用redux，我试图编辑标题，所以这是我有两个组成部分：（我在下面解释了我希望看到的但没有得到的内容）< / p>

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
    }
}

这是我的零钱变径器：

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

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

所以我希望然后在更改状态时，我可以直接在视图上进行更改，但是要坦白地说，即使更改了状态，我也不知道，当我单击Button时console.log给我的提示是：< / p>

{标题：“再次测试”} {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。

然后只需修改您现有的reducer即可处理状态更新。像这样：

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

我不确定您是否应该保留第二个减速器，但是如果需要，可以考虑一些事情。

您应该使用const或在声明中初始化状态： export default function titleReducer(state = [], action) {。然后只需返回state而不是最后的空数组即可。否则，您的状态将在每次操作分派时被覆盖。
您正在更改数据类型。您的状态默认为数组，但是您将返回类型为“ TITLE_CHANGED”的对象。保持一致。

更改Redux状态时，文本不会更新

1 个答案: