时间戳

首页 > 解决方案 > 什么是 redux-loop 以及我们如何在 react native 中使用它

redux - 什么是 redux-loop 以及我们如何在 react native 中使用它

问题描述

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

标签： reduxreact-native-androidredux-loop

解决方案

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

推荐阅读