如何在ReactRedux中实时处理状态

说我从fetch(api)调用中填充状态。所以，下面是我的减速器：如何在ReactRedux中实时处理状态

state.results.data：

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

而且我通过map功能显示这个在ListView。我有一个TouchableOpacity的onPressnumber = number+1。我通过dispatch和action来减速。像like按钮。所以现在说2的值是：

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

我能够做到这一点。该数字在视图中实时更新。但是，我如何在数据库上执行此操作。假设我通过node在回传和传递查询中有MySQL。我想我需要执行dispatch至action以增加number的值id=2，并将此呼叫发送至api至fetchpost。现在这需要一些时间。像第二个或第二个一样，db中的实际数据与已经处于该状态的数据不同。如何显示id:2的更新信息或者什么是最佳方式？

希望我解释一下。随时回答任何问题以进行澄清。

非常感谢。

来源

2017-09-16 Somename

您可以使用中间件，如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 [email protected]>=3.1.0 
    const store = createStore(
     rootReducer, 
     applyMiddleware(thunk) 
    );

来源

2017-09-16 10:19:58

'。然后（（项目）=>讯（{类型： “SOMETHING_UPDATED”，ID}））'是那里有我更新现有的状态？我正在使用'redux-thunk'。 – Somename

是的，一个相关的'reducer'应该捕获这个动作并返回新的状态 –

你的意思是只有该状态的对象应该返回这个逻辑权限？而不是整个国家。测试代码。 – Somename

如何在ReactRedux中实时处理状态

回答

相关问题