Redux Motive

Simplify writing action creators, reducers and effects - without breaking redux.

1const { reducer, ...actionCreators } = ReduxMotive({
2  config: {},
3  sync: {
4    // Sync function, combines Action Creator and Reducer
5    addTodo (state, todo) {
6      return assign({}, state, { todos: [ ...state.todos, todo ] })
7    },
8  },
9  async: {
10    // Async function, combines Action Creator and Effect
11    async createTodo (motive, text, isDone) {
12      const todo = await api('/todo', {text, isDone})
13      motive.addTodo(todo)
14    }
15  },
16})

Install

1yarn add redux-motive

Requirements

Add redux-thunk to your store's middleware. See redux-thunk docs for more details.

1yarn add redux-thunk

1import thunk from 'redux-thunk'
2const store = createStore(reducers, applyMiddleware(thunk))

Preamble

In UI development, our motive's for using redux are predictable.

1. Reduce an Action to change the state now, to rerender the UI soon.
2. Reduce the lifecycle of side effects, from an Action, to change state over time, to rerender the UI as the side effects progress.

Redux is great for splitting data-flow concerns into small concepts, but it can introduce indirection to a developers code, and at times this becomes the source of errors.

Motive removes indirection, by combining the purpose of a data-flow function to be both an Action Creator and a Reducer, or an Action Creator and an Effect.

Comparison

Generate action creators and a reducer with Motive.

1const { reducer, ...actionCreators } = ReduxMotive({
2  sync: {
3    // Sync function, combines Action Creator and Reducer
4    addTodo (state, todo) {
5      return assign({}, state, { todos: [ ...state.todos, todo ] })
6    },
7  },
8  async: {
9    // Async function, combines Action Creator and Effect
10    async createTodo (motive, text, isDone) {
11      const todo = await api('/todo', {text, isDone})
12      motive.addTodo(todo)
13    }
14  },
15})

Write action types, action creators and reducers with common redux boilerplate.

1const ADD_TODO = '@@MOTIVE/ADD_TODO'
2const CREATE_TODO_START = '@@MOTIVE/CREATE_TODO_START'
3const CREATE_TODO_END = '@@MOTIVE/CREATE_TODO_END'
4const CREATE_TODO_ERROR = '@@MOTIVE/CREATE_TODO_ERROR'
5
6const reducer = (state, action) => {
7  switch (action.type) {
8    case ADD_TODO:
9      return assign({}, state, { todos: [ ...state.todos, todo ] })
10    case CREATE_TODO_START:
11      return assign({}, state, { progressing: true })
12    case CREATE_TODO_END:
13      return assign({}, state, { progressing: false })
14    case CREATE_TODO_ERROR:
15      return assign({}, state, { error: action.payload, progressing: false })
16  }
17}
18
19const actionCreators = {
20  addTodo (todo) {
21    return { type: ADD_TODO, payload: { todo } }
22  },
23
24  createTodo (text, isDone) {
25    return (dispatch) => {
26      dispatch({ type: CREATE_TODO_START })
27      api('/todo', {text, isDone})
28        .then(todo => {
29          dispatch(actionCreators.addTodo(todo))
30          dispatch({ type: CREATE_TODO_END })
31        })
32        .catch(err => {
33          dispatch({ type: CREATE_TODO_ERROR, payload: err })
34        })
35    }
36  }
37}

Summary

Inferring common redux patterns into ReduxMotive allows for less coding.

• Action Creators often pass their params to Reducers in the Action; ReduxMotive always does behind the scenes.
• The progress of an effect's lifecycle in ReduxMotive is reduced to state at common stages: start, end or error.
• Dispatching actions from the end of effects is guaranteed; ReduxMotive provides dispatch-bound Action Creators in an effect's first parameter.

API

ReduxMotive( { config, sync, async } )

The returned object can be used to provide a reducer to the Redux.

Additionally, every function configured for sync and async are accessible as dispatchable Action Creators.

1const motive = ReduxMotive({
2  config: {}
3  sync: {
4    todo () {},
5  },
6  async: {
7    async fetchTodo () {}
8  }
9});
10
11console.log(motive);
12// {
13//   reducer,               Reducer function, wrapping all configured sync fns
14//   todo,                  An Action Creator generated from sync.todo
15//   fetchTodo              An Action Creator generated from async.fetchTodo
16// }

Configuring

1
2ReduxMotive({
3  // Default config values
4  config: {
5    prefix: '',
6    initialState: {},
7    handlers: {
8      start: (state) => assign({}, state, { progressing: true }),
9      end: (state) => assign({}, state, { progressing: false }),
10      error: (state, error) => assign({}, state, { progressing: false, error })
11    },
12  }
13})

1const { todo } = ReduxMotive({
2  sync: {
3    todo (state, isDone) {
4      return { ...state, isDone }
5    }
6  }
7})
8
9dispatch( todo(true) )

1ReduxMotive({
2  // ...
3
4  async: {
5    async fetchTodo (motive) {
6      const todo = await api();
7      motive.todo(todo.isDone)
8    }
9  }
10})

1ReduxMotive({
2  config: {
3    handlers: { /* ... */ }
4  },
5
6  async: {
7    fetchTodo: {
8      handlers: {
9        start (state) { /* ... */ },
10        end (state) { /* ... */ },
11        error (state) { /* ... */ }
12      },
13      async effect (motive) {
14        const todo = await api();
15        motive.todo(todo.isDone)
16      }
17    }
18  }
19})

Action Types

Action types for each Action Creators are available as properties, which is useful when attempting to match the types in a explicit way.

1console.log(motive.todo.ACTION_TYPE)
2// @@MOTIVE/<PREFIX>/TODO_SYNC
3
4console.log(motive.fetchTodo.ACTION_TYPE_START)
5// @@MOTIVE/<PREFIX>/SYNC_TODO_START
6console.log(motive.fetchTodo.ACTION_TYPE_END)
7// @@MOTIVE/<PREFIX>/SYNC_TODO_END
8console.log(motive.fetchTodo.ACTION_TYPE_ERROR)
9// @@MOTIVE/<PREFIX>/SYNC_TODO_ERROR

You don't need to use these if you're dispatching the generated Action Creators.

Alternatives & inspirations

License

Licensed under the MIT License, Copyright © 2017-present Lochlan Bunn.