Question

更新：最新的代码已经上传到GitHub - https://github.com/TechGnome/react-redux-refreshissue - 自从下面发布的代码以来，已经发生了一些微妙但重要的变化 - 特别是减速器中状态对象的更改一个对象的数组。

学习React-Redux，这是这只老狗的新技巧。我已经完成了几个教程，现在尝试将它提升到一个新的水平。当然，这并不容易，而且我一路上都错过了一些东西。首先是代码：动作/ MyNameActions.js

export const changeName = myNewName => ({
    type: 'CHANGE_NAME',
    myNewName
  })

减速器/ MyNameReducer.js

    const MyName = (state = [], action) => {

        console.log("REDUCER - action.myNewName: " + action.myNewName)
        console.log("REDUCER - state.myNewName: " + state.myNewName)

          switch (action.type) {
            case 'CHANGE_NAME':
              return [
                ...state,
                {
                  myNewName: action.myNewName
                }
              ]
            default:
              return state
          }
        }

        export default MyName

组件/ MyNameComponent.js

import React from 'react'
import { connect } from 'react-redux'
import { changeName } from '../actions/MyNameActions'

class MyName extends React.Component {
    render() {
        let input

        console.log("0) component - render() - this.props")
        console.log(this.props)

        return(
          <div>
          <form
            onSubmit={e => {
              e.preventDefault()
              if (!input.value.trim()) {
                return
              }
              console.log("2) component - render() - this.props")
              console.log(this.props)

              this.props.changeName(input.value)

              console.log("3) component - render() - this.props")
              console.log(this.props)

              input.value = ''
            }}
          >
            <input ref={node => input = node} />
            <button type="submit">
              Change Name
            </button>
          </form>
          Hi there, {this.state ? this.state.myNewName: this.props.myNewName}.
        </div>
          )
    }
}

const mapDispatchToProps = (dispatch) => {
return {changeName: myNewName => dispatch(changeName(myNewName))}
}

const mapStateToProps = (state) => {
  return {myNewName : state.myNewName}
}

export default connect(mapStateToProps, mapDispatchToProps)(MyName)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import { Provider } from 'react-redux'
import { createStore } from 'redux'

import MyName from './reducers/MyNameReducer'

const store = createStore(MyName, {myNewName:"enter your name"})

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

最终结果应该是一个页面，其中包含一个文本框，一个按钮和文本，要求我输入我的名字。在输入文本并单击按钮后，文本应从＆＃34更改;您好，请输入您的姓名。＆＃34; to＆＃34;嗨那里，techgnome。＆＃34; （假设我在文本框中输入了techgnome）。

只有它没有。相反，它改为＆＃34;嗨那里，。＆＃34;

从组件代码中可以看出，我一路上吐出了这个。我可以看到它很好。它发送到减速器运行的调度。并且，我在reducer中看到了正确的有效负载......但是当它从调度调用中返回时，它会恢复到先前的状态（而不是新的状态），然后再重新呈现组件不知何故this.props变得不确定！什么是什么？

现在已经盯着这几个小时了，并且正在寻找互联网管道，我什么也没做到。我很肯定我错过了一些简单而基本的东西，以至于我没有看到森林中的树木。

这应该是一个简单的交易。的Bleh。

-Tg

Answer 1

你的reducer应该返回一个对象，而不是一个数组。

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

    console.log("REDUCER - action.myNewName: " + action.myNewName)
    console.log("REDUCER - state.myNewName: " + state.myNewName)

      switch (action.type) {
        case 'CHANGE_NAME':
          return {
            ...state,
            myNewName: action.myNewName
          }
        default:
          return state
      }
    }

    export default MyName

Answer 2

你试过

吗？

Hi there, {this.props.myNewName}

由于您实现了mapsStateToProps

，因此在道具中可以使用更新后的状态

React-Redux - 为什么我的状态不能保持跟随调度？

2 个答案: