Results 1 to 3 of 3

Thread: [RESOLVED] React-Redux - state not being maintained following dispatch

  1. #1

    Thread Starter
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,532

    Resolved [RESOLVED] React-Redux - state not being maintained following dispatch

    UPDATE: To make it easier for others to diagnose, I've added the project to GitHub - https://github.com/TechGnome/react-redux-refreshissue
    There's been a couple changes to the code compared to below. The state object in the Reducer has been changed from an array to an object (still didn't help though).
    -tg


    Learning React-Redux for work. I've gone through several tutorials and now trying to take it to the next level. Naturally it's not that easy and I've missed something along the way.
    First the code:
    actions/MyNameActions.js
    Code:
    export const changeName = myNewName => ({
        type: 'CHANGE_NAME',
        myNewName
      })
    reducers/MyNameReducer.js
    Code:
    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
    components/MyNameComponent.js
    Code:
    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
    Code:
    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'));
    The end result is supposed to be a page that has a text box, a button and text asking me to enter my name. Upon entering text and clicking the button, the text should change from "Hi there, please enter your name." to "Hi there, techgnome." (assuming I entere techgnome in the text box).

    Only it doesn't. Instead it changes to "Hi there, ."

    As you can see from the component code, I spit out this.props along the way, and I can see it just fine. It goes to the dispatch, where the reducer runs. and, I see the correct payload in the reducer... but when it comes back out from the dispatch call, it's reverted to the previous state (instead of the new state) AND when it then re-renders the component, somehow this.props becomes undefined!
    What the what?

    been staring at this for a couple hours now &* searching the interwebnettubes and I've come up with nothing. I'm positive I've missed something simple and basic, so much so that I don't see the forest for the trees.

    This was supposed to be a simple deal too. Bleh.

    -tg
    Last edited by techgnome; May 18th, 2018 at 07:33 AM.
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  2. #2
    Superbly Moderated NeedSomeAnswers's Avatar
    Join Date
    Jun 2002
    Location
    Manchester uk
    Posts
    2,660

    Re: React-Redux - state not being maintained following dispatch

    I am just about to pick up looking at React & ReactNative for work and so have been looking for tutorials (which i have been bookmarking for later) so i can check them out to see if we want to use either for future projects.

    One of the tutorials i bookmarked was this one which is about React & Redux, i cant pretend to understand it yet but i liked the tutorial style and it seems quite detailed so its possible it might help - https://www.valentinog.com/blog/reac...ial-beginners/
    Please Mark your Thread "Resolved", if the query is solved & Rate those who have helped you



  3. #3

    Thread Starter
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,532

    Re: React-Redux - state not being maintained following dispatch

    i'll hae to check it out.
    In this case, my problem was my return line. I was returning an array, when it should have been an object. A stupid, yet subtle mistake.


    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width