Question

所以，我正在制作一个非常直观的移动应用程序，它具有以下场景：

人员名单
个人资料
添加表单

现在，我做的是，当我第一次加载LIST场景时，我进行了一次API调用（我有一个列表组件，一旦我从API获得结果，就会填充... state.people）。

一切都很好......当我点击一个人时他的个人资料打开，没有额外的API调用，只是从state.people数组中传递person对象。

这里也很好。

当我打开添加新人并发送表单时，我再次进行API调用（我发布信息并获取新对象）...

现在这让我感到困惑。

我想要的是通过POST获得OK确认后再通过另一个API调用（再次获取所有内容）来更新LIST场景state.people。

然后导航到Person的个人资料。

但是，我不在LIST场景的范围内（我是ADD NEW形式）。那么，这个正确的redux逻辑是什么？

LIST组件已经安装......如果我在不同的场景，我该如何与LIST沟通

对组件属性的所有这些绑定操作也令人困惑......为什么redux不能像全局中心那样始终可访问并始终保持其状态（至少在移动应用程序上）

实际上缺少真正的应用程序示例...到目前为止，我只看到非常简单的示例，这些示例在大规模上无法理解整个流程

我有的商店

/**
* STORE
*/
'use strict';

import { createStore, applyMiddleware } from 'redux';
import reducer from './_reducer';
import promiseMiddleware from 'redux-promise-middleware';
import thunkMiddleware from 'redux-thunk';

const store = createStore(reducer, {}, applyMiddleware(
  thunkMiddleware,
  promiseMiddleware()
));

export default store;

以及我的行动：

import * as constants from '../../constants/constants';
import request from '../../utils/request';


export const getAll = () => ({
    type: constants.PEOPLE_FETCH,
    payload: request(constants.API_PATH + 'person', {method: 'GET'})
});

export const search = (data, searchTerm) => ({
    type: constants.PEOPLE_SEARCH,
    payload: _filter(data, searchTerm)
});

export const save = (data) => ({
    type: constants.PERSON_SAVE,
    payload: request(constants.API_PATH + 'person', {method: 'POST', body: JSON.stringify(data)})
});

Answer 1

这可以是您的应用的示例架构：

制作一个包含人员列表的Redux store。
在初始API调用时，更新store以包含API调用提取的列表。
将您的应用包裹在Provider内，并将store传递给Provider。
使用connect和mapStateToProps以及mapDispatchToProps将Redux store与React state相关联。
每当您更新或插入新人并获取新对象时，您需要dispatch an action然后转到最终返回更新reducer function的{{1}}，并且不要担心重新渲染，因为当状态发生变化时，React会重新渲染。

我将给出一个store / actions / reducer的小例子，带有react + redux app。

Redux store

store.js

import { applyMiddleware, compose, createStore } from 'redux' import reducer from './reducer' import logger from 'redux-logger' // TOOD: add middleware let finalCreateStore = compose( applyMiddleware(logger()) )(createStore) export default function configureStore (initialState = { todos: [] }) { return finalCreateStore(reducer, initialState) }

actions.js

let actions = { helloWorld: function(data){ return { type: 'HELLO_WORLD', data: data } } }; export default actions //请阅读Redux文档，说明reducer需要是纯函数

reducer.js

export default function myReducer(state = [], action) { switch (action.type) { case 'HELLO_WORLD': return 'welcome' + data; default: return state; } }（React App）//在组件中，每当您收到新对象时，都会调度一个将修改商店的动作。

Component.js

无论何时单击React Component中的'div'，它都会调用函数handleClick（），其中有一个action dispatch。然后，此操作会调用reducer本身来更新商店。我知道你可能会对商店如何更新感到困惑。它有点令人困惑，但为此您需要按照基本教程来解释React + Redux。

请注意，这不是一个可运行的示例，只是一个伪代码。我建议你观看this youtube系列，以完全理解redux商店+ react + webpack

REDUX：理解一点概念+反应原生

1 个答案: