如何实时处理ReactRedux中的状态

Question

假设我从一个fetch(api)电话中填充了这个州。下面是我的减速机：

state.results.data：

[
  1: {
     id: '1',
     name: 'name1',
     number: 11
    },
  2: {
     id: '2',
     name: 'name2',
     number: 22
    },
  3: {
     id: '3',
     name: 'name3',
     number: 33
    }   
]

我在ListView中通过一个map函数显示了这一点。我有TouchableOpacity给onPress number = number+1。这是由dispatch action给减速机做的。就像一个like按钮。因此，假设2的值现在是：

2: {
     id: '2',
     name: 'name2',
     number: 23       // <= number increased onPress.
    }

我能做到这一点。该数字在视图中实时更新。但我该怎么在数据库上做这个呢。假设我在备份的MySQL中，并通过node传递查询。我想我需要做一个dispatch到action，以增加number的id=2值，并通过fetch post将这个调用发送给api。现在这需要一些时间。就像第二个或第二个数据一样，db中的实际数据与已经处于状态的数据不同。如何显示id:2的更新信息，或者使用什么更好的方法来实现这一点？

希望我能解释清楚。准备回答任何需要澄清的问题。

非常感谢。

Answer 1

你可以使用像雷克这样的中间件.

这将允许您分派一个function，而不是通常应该做的事情，即分派一个Object。

现在，如果您可以分派一个function，那么这个函数可以fetch，甚至返回一个promise。当该承诺得到解决后，您可以像通常所做的那样分派操作创建者。

例如：

// someActions.js
export function updateSomething(id) {
    return (dispatch) => {
        dispatch({type: 'FETCH_IN_PROGRESS'});
        fetch(`myServer.com/updateSomething?id=${id}`)
        .then((response) => response.json())
        .then((item) => dispatch({type: "SOMETHING_UPDATED", id}))
    };
} 

请注意，我没有包括错误处理，我强烈建议这样做(如.catch)。

当您创建您的商店时，您应该注入以下中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

    // Note: this API requires redux@>=3.1.0
    const store = createStore(
      rootReducer,
      applyMiddleware(thunk)
    );