Izanami - simple state management with react-navigation

actions.js

import api from 'resources/api'
import storage from '@react-native-community/async-storage'
import { useCallback } from 'react'


export const authenticate = ({ dispatch, state, navigation, route }) => {
  return async () => {
    try {
      const { email, password } = state.form
      const { data } = await api.post('/api/login', { email: email.value, password: password.value })
      dispatch({ type: 'authenticated', payload: data })
    } catch(error) {
      console.log(route)
    }
  }
}

export const getToken = ({ dispatch, state, navigation, route }) => useCallback(async () => {
  const value = await storage.getItem('token')
  value && dispatch({ type: 'loggedIn', payload: value })
})

authReducer.js

import createReducer from 'resources/utils/createReducer'

const authReducer = createReducer({
  login(state, action) {
    return state
  },
  loggedIn(state, action) {
    return {
      ...state,
      token: action.payload
    }
  }
})



export default authReducer

combineReducers.js

const combineReducers =  (reducers = {}) => (state = {}, action) =>
  Object.assign(
    {},
    state,
    ...Object.keys(reducers).map(key => ({
      [key]: reducers[key](state[key], action),
  })),
)

export default combineReducers

createReducer.js

const createReducer = (handlers, initialState = {}) => {
  const reducer = (state = initialState, action) => {
    const handler = handlers[action.type]
    return handler ? handler(state, action) : state
  }
  return reducer
}

export default createReducer

Izanami.js

import map from 'lodash/map'
import { useReducer } from 'react'
import { useNavigation, useRoute } from '@react-navigation/native'

const Izanami = (actions, reducer, initialState) => {
  const [state, dispatch] = useReducer(reducer, initialState)
  const navigation = useNavigation()
  const route = useRoute()
  const actionCreators = map(actions, value => value({ dispatch, state, route, navigation }))
  return [state, ...actionCreators]
}

export default Izanami

usage.js

import React, { createContext, useEffect } from 'react'
import * as authActions from 'resources/actions/auth'
import * as formActions from 'resources/actions/form'
import izanami from 'resources/izanami'
import auth from 'resources/reducers/auth'
import form, {
  initialStates as formInitialState,
} from 'resources/reducers/form'
import combineReducers from 'resources/utils/combineReducers'

const reducers = combineReducers({ auth, form })

export const AuthContext = createContext({})

const AuthProvider = ({ children }) => {
  const [state, authenticate, getToken, handleChange] = izanami(
    { ...authActions, ...formActions },
    reducers,
    { form: formInitialState },
  )
  useEffect(() => {
    getToken()
  }, [])

  return (
    <AuthContext.Provider
      value={{ fields: state.form, handleChange, authenticate }}>
      {children}
    </AuthContext.Provider>
  )
}

export default AuthProvider