Redux-async-state NPM

Redux Async State

Welcome to your new approach to creating a redux ecosystem in your react app. Redux Async State is a small package to make easy your job when using redux with the async flow.

Motivation

Redux is an important part of your application when it deals with a large data stream. Especially in a scenario that many components access the same state.

But redux's repetitive codes can get you a big deal.

Working with asynchronous streams can also be a big challenge as you will need middleware to do this service.

This is exactly what redux-async-state tries to solve.

Join asynchronous streams to synchronous streams within what would be a reducer.

Prerequisites and installation.

Application React Redux and Redux for React

Prerequisites and instalation

Application React Redux and Redux for React

Installing with NPM

npm i redux-async-state --save

Creating Default Actions

Actions are simples functions what return default object with type and payload optional.

import { createAction } from 'redux-async-state';

const removeTodoAction = createAction('REMOVE_TODO', action => id => action(id));
const addTodoAction = createAction('ADD_TODO', action => todo => action(todo));
const toggleTodoAction = createAction('TOGGLE_TODO', action => id => action(id));
const getPostsAction = createAction('GET_POSTS_START', action => () => action());
const getPostsActionFinish = createAction('GET_POSTS_FINISH', action => todos => action(todos));
const errorAction = createAction('ERROR', action => error => action(error));

Creating handle functions

The most important in a reducer is to return a new state. If you try dispatch an action inside a reducer function you get a big error.

By performing a dispatch in the middle of it, you will have changed the state of the application before returning a value.

Handle async flow with Promise

const getPosts = ({dispatch}) =>
  Axios.get('http://www.hackintoshworld.com/wp-json/wp/v2/posts')
    .then(response => dispatch(getPostsActionFinish(response.data)))
    .catch(err => dispatch(errorAction(err.data)))

And async flow with a default handle function

const getPostSuccess = ({state, action}) =>
  [ ...state,
    ...action.payload.map(item => ({
      id: item.id,
      text: item.slug
    }))
  ]

Others handles synchronous

const add = ({state, action}) => [
  ...state,
  { id: Math.random(), text: action.payload, complete: false }
];

const toggle = ({state, action}) => {
  return state.map(
    todo =>
      todo.id === action.payload ? { ...todo, complete: !todo.complete } : todo
  );
}

const remove = ({state, action}) =>
  state.filter(todo => todo.id !== action.payload);

Registering a reducer

import { createReducer } from 'redux-async-state';
import Axios from 'axios';

const INITIAL_STATE = [];

const reducer = createReducer(INITIAL_STATE)
  .setHandle(addTodoAction, add)
  .setHandle(toggleTodoAction, toggle)
  .setHandle(removeTodoAction, remove)
  .setHandle([addTodoAction, getPostsAction], getPosts) //many actions one reducer
  .setHandle(getPostsActionFinish, getPostSuccess)
  .setHandle(errorAction, error);

Async Middleware

Finally register your middleware in your store application.

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";

import reducers from "./reducers";
import { middlewareAsync } from 'redux-async-state';

const composeEnhancers = composeWithDevTools({});

const store = createStore(
    reducers, 
    composeEnhancers(
        applyMiddleware(
            middlewareAsync
        )
));