Redux/React-搜索字段不会立即更新Redux状态 [英] Redux/React - Search field is not updating the redux state instantly

问题描述

我是redux世界的新手，我正在尝试制作报纸应用程序.我目前正在使用搜索功能，用户可以在其中搜索特定的报纸标题.问题是当我第一次键入"a"时，状态为".当我输入更多例如"b"时，状态表明术语"a"应为"ab".我正在使用redux chrome工具来检查此全局状态.

I am new to redux world and I am trying to make newspaper app. I am currently working on the search functionality where the user can search for specific newspaper title. The problem is that when I first types eg 'a' the state is ''. And when I type more eg 'b' the state shows that the term is 'a' when it should be 'ab'. I am using redux chrome tools to check this global state.

我的Actioncreator非常简单(仅返回传递给它的术语):

My Actioncreator is really simple (only returns the term passed to it):

export function search(term) {
  return{
    type:SEARCH,
    term
  }
}

这是减速器:

const SearchReducer = (state = '', action) => {

    switch (action.type) {
        case SEARCH:
            return action.term;
        default:
            return state;
    }

}

这是根减速器:

/*Application state*/
const rootReducer = combineReducers({
    weather: WeatherReducer,
    filters: FilterReducer,
    articles:ArticleReducer,
    search: SearchReducer // this should be 'ab', but is 'a' 
});

这是非常简单的设置.这就是我与Redux交流的方式.

This is really simple setup. Here is how I am communicating with redux.

我有我的material-ui文本字段(我也尝试过香草输入字段)

I have my material-ui textfield (i tried vanilla input field too)

<TextField  style={style.searchWidget.search}
            floatingLabelText="Search"
            value={this.state.term}
            onChange={this._onSearchChange}
 />

当用户键入某些内容时，就会触发_onSearchChange函数.

When the user types something the _onSearchChange func is fired.

_onSearchChange(event) {
    this.setState({term: event.target.value});
    this.props.search(this.state.term);
}

这将设置此搜索组件的当前状态.然后，它将调度搜索操作，该操作将更新全局状态.但是不能正常工作.全局状态总是落后1步.

This will set current state for this search component. Then it will dispatch search action which will update the global state. But does not work correctly. The global state is always 1 step behind.

有什么主意吗?

看起来它不是redux，但会做出反应.组件状态不是立即更新.正确的术语传递给了动作减少器，因此这不是redux的错.设置状态后，我尝试打印出this.state.term.看起来状态没有更新.

It looks like it is not redux but react. The component state is not updating instantly. Correct term is passed to the actionreducer so it is not redux's fault. I tried to print out this.state.term after setting the state. And it looks like the state is not updating.

推荐答案

实际上，它与redux无关.您必须记住，在使用React时，您无法在更新React状态后立即获得更新状态.让我们举个例子.

Actually it is not related to redux. You'll have to remember while working with react that you can not get the updated state as soon as you update your react state. let's take an example.

getInitialState: function() {
  return {
     myState: 0
  }
},

updateState: function(stateVersion) {
   console.log(this.state.myState); //this will print 0
   this.setState({ myState: stateVersion });
   console.log(this.state.myState); //this will print 0
}

现在是第一次，如果我们使用状态版本作为参数调用updateState函数，则即使我们发送了1或2或任何数字作为参数，它在两个控制台上都将打印0. 假设我们已经发送了2个参数.那么我们可以在下一次调用该函数时使用另一个参数来获取该状态. 但是反应也要注意这一点. 您可能会认为，如果状态没有在我们更新后立即更新，那么我该如何处理.但是反应是个好男孩... 如果您调用一个函数来更新状态，然后又调用另一个函数来处理上次更新的状态，则可以使用该功能.

now for the first time if we call updateState function with state version as argument it will print 0 for both the console even if we sent 1 or 2 or any number as argument. suppose we have sent 2 as argument. then we can get that state in the next call of that function with another arguments. But react also take care of this. You may think that if the state is not updated as soon as we update that then how can I work with that. But react is a good boy... if you call a function to update a state and next you call another function to work with last updated state then you can work with that.

我想我已经回答了您的问题，为什么不更新redux状态.

I think I have already answered your question that why not redux state is updated.

另一种想法是，当您将redux状态用于搜索缩减器时，为什么还要处理react状态.您可以将搜索到的参数直接传递到您的操作中.您可以从减速器状态立即获取该更新. 它将帮助您简化代码.

another think is that when you are using redux state for your search reducer then why you are also handling react state. you can directly pass the searched params into your action. You can get that update instantly from your reducer state. It will help your code simplicity.

这篇关于Redux/React-搜索字段不会立即更新Redux状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！