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

Question

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

Answer 1

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

这是一个示例，您可以在其中触发提取并描述如何处理成功和失败，所有这些都来自您的 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-loop。

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

注意:我维护 redux-loop