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中显示此内容。我有onPress number = number+1的TouchableOpacity。我通过dispatch和action来减速器。就像like按钮一样。所以说2的值现在是：

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

我能够做到这一点。该数字在视图中实时更新。但是我该如何在数据库上执行此操作。假设我在后备中有MySQL并通过node传递查询。我想我需要dispatch到action来增加number id=2的价值，并通过api将此调用发送到fetch } post。现在这需要一些时间。像第二个或第二个，db中的实际数据与已经处于状态的数据不同。如何显示id:2的更新信息或者首选的方法？

希望我解释一下。准备回答任何问题以便澄清。

非常感谢。

Answer 1

您可以使用像redux-thunk这样的中间件这将允许您发送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)
    );

如何实时操作ReactRedux中的状态

1 个答案: