React Redux 存储状态更改不起作用

问题描述

下面的超级简单代码没有按预期工作.

The below super simple code is not working as expected.

我正在通过 redux store 使用 react 和注入/提供 props.我的理解是在 React 组件中存储注入道具.

I am using react and injecting/providing props via redux store. what my understanding is store inject props in the React component.

为了使这个组件工作，为什么我需要 line1 和 line 2 ?

To make this component work why I need both line1 and line 2 ?

import React from 'react';
import './sytles.css';
import { fetchUsers } from "./actions/userAction"
import { connect } from "react-redux"

@connect((store) => {
    return {
        signup: store.users,
    };
  })
class Signup extends React.Component {

    handleClick(event) {
       this.setState({email: event.target.value}) //line 1
       this.props.signup.email = event.target.value; // line 2
    }
    render() {
        return (
                <input
                    type="text"
                    name="email"
                    value={this.props.signup.email}
                    onChange=
                    { (event) => this.handleClick(event) }/>
        );
    }

}
export default Signup;

推荐答案

你不能重新分配 props —— 即使在 Redux 之外，它也是只读的.但是要更改 Redux 存储，您需要发送一个操作.根据 Redux 的三项原则 的 Redux 文档:

You can't reassign props -- it's read only even aside from Redux. But to change the Redux store, you dispatch an action. Per the Redux documentation of The Three Principles of Redux:

这确保视图和网络回调都不会直接写入状态.相反，他们表达了改变国家的意图.因为所有的变化都是集中的，并且按照严格的顺序一一发生，所以没有需要注意的微妙竞争条件.由于操作只是普通对象，因此它们可以被记录、序列化、存储，并在以后为调试或测试目的重播.

这篇关于React Redux 存储状态更改不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！