React-Redux - Почему мое состояние не поддерживается после отправки? - PullRequest
Новая
       7

React-Redux - Почему мое состояние не поддерживается после отправки?

0 голосов
/ 17 мая 2018

ОБНОВЛЕНИЕ: последний код был загружен в GitHub - https://github.com/TechGnome/react-redux-refreshissue - произошли некоторые тонкие, но существенные изменения с тех пор, как код размещен ниже - в частности, изменение объекта состояния в редукторе с массива наобъект.

Learning React-Redux, новый трюк для этой старой собаки.Я прошел несколько уроков и сейчас пытаюсь поднять его на следующий уровень.Естественно, это не так просто, и я что-то упустил по пути.Сначала код: actions / MyNameActions.js 

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

Redurs / 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'));

Предполагается, что конечным результатом будет страница с текстовым полем, кнопкой и текстом с просьбой ввести мое имя.После ввода текста и нажатия кнопки текст должен измениться с «Привет, пожалуйста, введите ваше имя».на "Привет, techgnome."(при условии, что я ввожу techgnome в текстовое поле).

Только это не так.Вместо этого он меняется на «Привет».

Как вы можете видеть из кода компонента, я выкладываю this.props по пути, и я вижу это очень хорошо.Идет в диспетчерскую, где работает редуктор.и я вижу правильную полезную нагрузку в редукторе ... но когда он возвращается из вызова диспетчеризации, он возвращается в предыдущее состояние (а не в новое состояние) И когда он затем повторно визуализирует компонент, каким-то образом это.реквизит становится неопределенным!Что за что?

пялился на это уже пару часов и * искал межсетевые трубки, и я ничего не придумала.Я уверен, что упустил что-то простое и простое, настолько, что я не вижу лес за деревьями.

Это тоже должно было быть простым делом.Bleh.

-tg

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Вы пытались 

Hi there, {this.props.myNewName}

Обновленное состояние доступно в подпорках, поскольку вы реализовали mapsStateToProps

0 голосов
/ 17 мая 2018

Ваш редуктор должен возвращать объект, а не массив.

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