如何從ReactJS + Redux應用程序正確地進行REST調用？

Question

我正在使用ReactJS + Redux，以及Express和Webpack。 有一個API構建，我希望能夠從客戶端進行REST調用 - GET，POST，PUT，DELETE。

使用Redux架構如何以及正確的方法是什么？ 就減速器，動作創建器，存儲和反應路線而言，任何流程的良好示例都將非常有用。

先感謝您！

Answer 1

最簡單的方法是使用redux-thunk軟件包。 這個包是一個redux中間件，所以首先，你應該將它連接到redux：

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

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

這允許您調度async操作以及常規sync操作。 讓我們創建其中一個：

// actions.js

export function fetchTodos() {
  // Instead of plain objects, we are returning function.
  return function(dispatch) {
    // Dispatching REQUEST action, which tells our app, that we are started requesting todos.
    dispatch({
      type: 'FETCH_TODOS_REQUEST'
    });
    return fetch('/api/todos')
      // Here, we are getting json body(in our case it will contain `todos` or `error` prop, depending on request was failed or not) from server response
      // And providing `response` and `body` variables to the next chain.
      .then(response => response.json().then(body => ({ response, body })))
      .then(({ response, body }) => {
        if (!response.ok) {
          // If request was failed, dispatching FAILURE action.
          dispatch({
            type: 'FETCH_TODOS_FAILURE',
            error: body.error
          });
        } else {
          // When everything is ok, dispatching SUCCESS action.
          dispatch({
            type: 'FETCH_TODOS_SUCCESS',
            todos: body.todos
          });
        }
      });
  }
}

我更喜歡在表現和容器組件上分離反應組件。 本文完美地描述了這種方法。

接下來，我們應該創建TodosContainer組件，它將為表示Todos組件提供數據。 在這里，我們使用react-redux庫：

// TodosContainer.js

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

class TodosContainer extends Component {
  componentDidMount() {
    // When container was mounted, we need to start fetching todos.
    this.props.fetchTodos();
  }

  render() {
    // In some simple cases, it is not necessary to create separate `Todos` component. You can put todos markup directly here.
    return <Todos items={this.props.todos} />
  }
}

// This function is used to convert redux global state to desired props.
function mapStateToProps(state) {
  // `state` variable contains whole redux state.
  return {
    // I assume, you have `todos` state variable.
    // Todos will be available in container component as `this.props.todos`
    todos: state.todos
  };
}

// This function is used to provide callbacks to container component.
function mapDispatchToProps(dispatch) {
  return {
    // This function will be available in component as `this.props.fetchTodos`
    fetchTodos: function() {
      dispatch(fetchTodos());
    }
  };
}

// We are using `connect` function to wrap our component with special component, which will provide to container all needed data.
export default connect(mapStateToProps, mapDispatchToProps)(TodosContainer);

此外，您應該創建todosReducer ，它將處理FETCH_TODOS_SUCCESS操作，如果您想要顯示加載器/錯誤消息，則應創建其他2個操作。

// reducers.js

import { combineReducers } from 'redux';

const INITIAL_STATE = {
  items: [],
  isFetching: false,
  error: undefined
};

function todosReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'FETCH_TODOS_REQUEST':
      // This time, you may want to display loader in the UI.
      return Object.assign({}, state, {
        isFetching: true
      });
    case 'FETCH_TODOS_SUCCESS':
      // Adding derived todos to state
      return Object.assign({}, state, {
        isFetching: false,
        todos: action.todos
      });
    case 'FETCH_TODOS_FAILURE':
      // Providing error message to state, to be able display it in UI.
      return Object.assign({}, state, {
        isFetching: false,
        error: action.error
      });
    default:
      return state;
  }
}

export default combineReducers({
  todos: todosReducer
});

對於其他操作，如CREATE ， UPDATE ， DELETE ，沒有什么特別之處，它們的實現方式相同。

Answer 2

簡短的回答是：

1. redux不是一種架構
2. 您可以使用任何庫。 這些天很多人直接使用fetch API。
3. 為了能夠將redux與異步操作（AJAX所需）集成，您需要使用庫來提供幫助。 其他人說，最受歡迎的兩個是redux-thunk和redux-saga 。

對於一個可以插入redux應用程序的腦死亡簡單庫，您可以嘗試使用redux-crud-store 。 免責聲明：我寫了。 如果您有興趣將fetch API或其他API客戶端與redux-saga集成，您還可以閱讀redux-crud-store的源代碼。

Answer 3

這是諸如redux-thunk ， redux-saga和redux-observable等庫的主要用例。

redux-thunk是最簡單的，你會做這樣的事情：

import fetch from 'isomorphic-fetch'

export const REQUEST_POSTS = 'REQUEST_POSTS'
function requestPosts(subreddit) {
  return {
    type: REQUEST_POSTS,
    subreddit
  }
}

export const RECEIVE_POSTS = 'RECEIVE_POSTS'
function receivePosts(subreddit, json) {
  return {
    type: RECEIVE_POSTS,
    subreddit,
    posts: json.data.children.map(child => child.data),
    receivedAt: Date.now()
  }
}

// Meet our first thunk action creator!
// Though its insides are different, you would use it just like any other action creator:
// store.dispatch(fetchPosts('reactjs'))

export function fetchPosts(subreddit) {

  // Thunk middleware knows how to handle functions.
  // It passes the dispatch method as an argument to the function,
  // thus making it able to dispatch actions itself.

  return function (dispatch) {

    // First dispatch: the app state is updated to inform
    // that the API call is starting.

    dispatch(requestPosts(subreddit))

    // The function called by the thunk middleware can return a value,
    // that is passed on as the return value of the dispatch method.

    // In this case, we return a promise to wait for.
    // This is not required by thunk middleware, but it is convenient for us.

    return fetch(`http://www.reddit.com/r/${subreddit}.json`)
      .then(response => response.json())
      .then(json =>

        // We can dispatch many times!
        // Here, we update the app state with the results of the API call.

        dispatch(receivePosts(subreddit, json))
      )

      // In a real world app, you also want to
      // catch any error in the network call.
  }
}

以上示例直接來自http://redux.js.org/docs/advanced/AsyncActions.html ，它確實是您問題答案的權威來源。