在react-redux中调度动作

Question

I am trying to dispatch an action using react-redux. I have watched several tutorials and read the documentation, however, I am still not sure what I am doing wrong.

Here is some code:

Container.js

import React from 'react';
import {connect} from 'react-redux';
import * as Actions from '../../../actions'
import { bindActionCreators } from 'redux'

class Searchbar extends React.Component {
   // some constructor here
   // some methods
   onClickAction(){
      let {rememberUserQuery} = this.props.actions
      console.log(this.props.userQuery) //empty as expected
      rememberUserQuery(someInputDeclaredInsideTheMethod)
      console.log(this.props.userQuery) //still empty instead of being updated
   };
   // some rendor
  }
}

function mapStateToProps(store) {
  let {userQuery} = store.landingPgReducer;
  return {userQuery}
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Searchbar)

Reducers.js

import {
  REMEMBER_USER_QUERY
} from '../actions'

// Reducer to keep track of which form should be shown
export function landingPgReducer(state = {userQuery:''}, action) {
  switch (action.type) {
    case REMEMBER_USER_QUERY:
      console.log(state) //the reducer gets called and has blank state as expected
      console.log(action) //the reducer is called with inputs as expected
      return Object.assign({}, state,
        action.userQuery
      )
    default:
      return state
  }
}

Actions.js

export const REMEMBER_USER_QUERY = 'REMEMBER_USER_QUERY'

export function rememberUserQuery(userQuery) {
  console.log('rememberUserQuery',userQuery) //never getting to that console.log
  return {
    type: REMEMBER_USER_QUERY,
    userQuery 
  }
}

PS I have combined reducers in another file and created a store to which I am connecting.

UPDATED: I am trying to change global state so that I render accordingly in another component to which I navigate using this.props.history.push("/reports") right after I call the reducer with the action. In this other component the global state has not changed and the value of 'userQuery' is still '', as the console.logs up in the code are showing.

Answer 1

Try amending the object you pass to Object.assign() in the return statement of your reducer to the following:

Reducers.js

import { REMEMBER_USER_QUERY } from '../actions'

// Reducer to keep track of which form should be shown
export function landingPgReducer(state = { userQuery: '' }, action) {

  switch (action.type) {

    case REMEMBER_USER_QUERY:
      console.log(state) // the reducer gets called and has blank state as expected
      console.log(action) // the reducer is called with inputs as expected

      return Object.assign({}, state, {
        userQuery: action.userQuery
      })

    default:
      return state

  }

}

If action.userQuery just contains a string from a user input then you will just be returning the original state as you are currently just passing a string to Object.assign() when you should be passing an object with the properties that you want to overwrite.

Answer 2

Change your reducer like below. If your 'action.userQuery' return Object use

return { ...state, action.userQuery }

else

return {...state, userQuery: action.userQuery }

Reducer

import {
  REMEMBER_USER_QUERY
} from '../actions'

// Reducer to keep track of which form should be shown
export function landingPgReducer(state = {userQuery:''}, action) {
  switch (action.type) {
    case REMEMBER_USER_QUERY:
      console.log(state) //the reducer gets called and has blank state as expected
      console.log(action) //the reducer is called with inputs as expected
      return {...state,
        userQuery: action.userQuery
      }
    default:
      return state
  }
}