ReduxSauce 使用教程

ReduxSauce 使用教程

reduxsauceSome aesthetic toppings for your Redux meal.项目地址:https://gitcode.com/gh_mirrors/re/reduxsauce

项目介绍

ReduxSauce 是一个为 Redux 提供便利工具的开源库，旨在简化 Redux 的常见操作，如创建 action types 和 action creators，以及管理 reducers。它通过提供一系列的辅助函数，使得 Redux 的使用更加简洁和高效。

项目快速启动

安装

首先，你需要安装 ReduxSauce 和 Redux：

npm install reduxsauce redux

创建 Actions

使用 createActions 函数来创建 action types 和 action creators：

import { createActions } from 'reduxsauce';

const { Types, Creators } = createActions({
  loginRequest: ['username', 'password'],
  loginSuccess: ['username'],
  loginFailure: ['error'],
  logout: null
});

export { Types, Creators };

创建 Reducers

使用 createReducer 函数来创建 reducers：

import { createReducer } from 'reduxsauce';
import { Types } from './actions';

const INITIAL_STATE = {
  isLoggingIn: false,
  error: null,
  username: null
};

const loginRequest = (state = INITIAL_STATE, action) => ({
  ...state,
  isLoggingIn: true,
  error: null
});

const loginSuccess = (state = INITIAL_STATE, action) => ({
  ...state,
  isLoggingIn: false,
  username: action.username
});

const loginFailure = (state = INITIAL_STATE, action) => ({
  ...state,
  isLoggingIn: false,
  error: action.error
});

const logout = (state = INITIAL_STATE, action) => ({
  ...state,
  username: null
});

const HANDLERS = {
  [Types.LOGIN_REQUEST]: loginRequest,
  [Types.LOGIN_SUCCESS]: loginSuccess,
  [Types.LOGIN_FAILURE]: loginFailure,
  [Types.LOGOUT]: logout
};

export default createReducer(INITIAL_STATE, HANDLERS);

应用案例和最佳实践

案例：用户登录系统

假设我们正在构建一个简单的用户登录系统，使用 ReduxSauce 可以非常方便地管理登录状态和错误处理。

1. 定义 Actions：

import { createActions } from 'reduxsauce';

const { Types, Creators } = createActions({
  loginRequest: ['username', 'password'],
  loginSuccess: ['username'],
  loginFailure: ['error'],
  logout: null
});

export { Types, Creators };

2. 创建 Reducers：

import { createReducer } from 'reduxsauce';
import { Types } from './actions';

const INITIAL_STATE = {
  isLoggingIn: false,
  error: null,
  username: null
};

const loginRequest = (state = INITIAL_STATE, action) => ({
  ...state,
  isLoggingIn: true,
  error: null
});

const loginSuccess = (state = INITIAL_STATE, action) => ({
  ...state,
  isLoggingIn: false,
  username: action.username
});

const loginFailure = (state = INITIAL_STATE, action) => ({
  ...state,
  isLoggingIn: false,
  error: action.error
});

const logout = (state = INITIAL_STATE, action) => ({
  ...state,
  username: null
});

const HANDLERS = {
  [Types.LOGIN_REQUEST]: loginRequest,
  [Types.LOGIN_SUCCESS]: loginSuccess,
  [Types.LOGIN_FAILURE]: loginFailure,
  [Types.LOGOUT]: logout
};

export default createReducer(INITIAL_STATE, HANDLERS);

3. 结合 React 和 Redux：

import React from 'react';
import { connect } from 'react-redux';
import { Creators } from './actions';

class Login extends React.Component {
  handleLogin = () => {
    const { username, password } = this.state;
    this.props.loginRequest(username,

reduxsauceSome aesthetic toppings for your Redux meal.项目地址:https://gitcode.com/gh_mirrors/re/reduxsauce