1

什么是 redux-loop,在 React Native 应用程序中使用它的主要目的是什么?

4

1 回答 1

4

Redux Loop 是一个库,可让您通过将 elm 架构移植到 redux 以纯粹且可测试的方式从 reducer 运行副作用。它的用途与 redux-thunk 和 redux-saga 类似。

这是一个示例,您可以在其中触发 fetch 并描述如何处理成功和失败,所有这些都来自您的 reducer。

//reducer.js
import { loop, Cmd } from 'redux-loop';

const initialState = {
  loading: false,
  data: null,
  error: null
}

function reducer(state = initialState, action){
  if(action.type === 'pageLoaded'){
    const newState = {...state, loading: true};
    const cmd = Cmd.run(fetchData, {
      successActionCreator: dataLoaded,
      failActionCreator: dataLoadFailed,
      args: [action.itemId]
    });
    return loop(newState, cmd);
  }
  else if(action.type === 'dataLoaded'){
    return {
      ...state,
      loading: false,
      data: action.data,
      error: null
    };
  }
  else if(action.type === 'dataLoadFailed'){
    return {
      loading: false,
      error: action.error
    };
  }
  return state;
}

export default reducer;

注意 fetchData 从来没有真正从你的 reducer 中调用,所以它仍然是一个纯函数,只返回数据并且易于测试。

您将在 react-native 应用程序中使用 redux-loop 它,原因与在带有 redux 的常规 react 应用程序中使用它的原因相同,即 redux 本身不提供直接从 redux 代码运行副作用的方法。相反,它允许您为 redux 编写中间件和存储增强器(redux-loop 就是这样),从而让您自己决定要如何做到这一点。

您可以在https://redux-loop.js.org/阅读更多内容

注意:我维护 redux-loop

于 2019-10-13T20:49:20.560 回答