REDUX：了解一点概念+反应本机

Question

所以，我正在开发一个具有以下场景的非常简单的移动应用程序：

人员列表
人物简介
添加表格

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

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

这里也很好。

当我打开 ADD NEW person 并发送表单时，我进行了另一个 API 调用（我 post 信息并取回新对象）...

现在是让我困惑的地方。

我想要的是在我从 POST 获得 OK 确认后，通过再次调用 API 来更新 LIST 场景 state.people。

然后导航至此人的个人资料。

但是，我在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 最后 returns 更新的 Redux store，不要担心重新渲染，因为 React 会在状态发生变化时自行重新渲染。

我举一个store/actions/reducer的小例子，用react + redux app.

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

reducer.js // 请阅读 Redux 文档，reducer 需要是纯函数

export default function myReducer(state = [], action) {
  switch (action.type) {
    case 'HELLO_WORLD':
      return 'welcome' + data;
    default:
      return state;
  }
}

Component.js（React App）//每当你收到新对象时，在组件中发送一个将修改商店的动作。

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import actions from '../redux/actions'

class App extends Component {

  handleClick() {
    store.dispath(action.helloWorld("jimmy")); //this dispatches an action, which goes to the reducer to change the state and adds 'welcome' before 'jimmy'
  }

  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>
        {store.getState()} //getState function to access store values
      </div>
    )
  }

  }

  function mapStateToProps(state) {
    return state
  }

  function mapDispatchToProps(dispatch) {
    return {
      actions: bindActionCreators(actions, dispatch) //binds all the actions with dispatcher and returns them
    }
  }

  export default connect(mapStateToProps, mapDispatchToProps)(App)

这就像在 React 组件中单击 'div' 时一样，它会调用函数 handleClick()，其中有一个动作调度。这个动作然后调用减速器本身来更新商店。我知道您可能会对商店如何更新感到困惑。它有点令人困惑，但为此您需要按照基本教程来解释 React+Redux。

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

REDUX：了解一点概念+反应本机

REDUX: understanding a bit the concept + react native

reactjs-flux

react-native