在 react-redux 中调度一个动作

Question

我正在尝试使用 react-redux 调度一个动作。我看过几个教程并阅读了文档，但是，我仍然不确定我做错了什么。

这是一些代码：

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

P.S。我在另一个文件中组合了 reducer 并创建了一个我正在连接的商店。

更新：我正在尝试更改全局状态，以便在使用操作调用 reducer 后立即在使用 this.props.history.push("/reports") 导航到的另一个组件中进行相应渲染。在这个其他组件中，全局状态没有改变，'userQuery' 的值仍然是 ''，如代码中的 console.logs 所示。

Answer 1

尝试将您在减速器的 return 语句中传递给 Object.assign() 的对象修改为以下内容：

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

  }

}

如果 action.userQuery 仅包含来自用户输入的字符串，那么您将只是 return 原始状态，因为您当前正在传递一个字符串到 Object.assign() 当你应该传递一个具有你想要覆盖的属性的对象时。

Answer 2

像下面这样改变你的减速器。如果您的 'action.userQuery' return 对象使用

return { ...state, action.userQuery }

其他

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

减速器

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

在 react-redux 中调度一个动作

Dispatching an action in react-redux

reactjs

redux

react-redux