In this article I’ll show how fast to develop React / Redux app using . Redux Lazy Let me share links to my previous articles about : Redux Lazy _Each time working with redux in react app we spend a lot of time to make action types, action creators, reducers… Most…_hackernoon.com React — redux for lazy developers _In this article I’m continue to discuss creating react redux app using redux-lazy._hackernoon.com React — redux for lazy developers. Part 2 _It’s the last part of series about creating react redux app._hackernoon.com React — redux for lazy developers. Part 3 is a wrapper for redux stuff (action types, action creators, reducers, containers…). It’s like recompose for redux. Redux Lazy If you are working with you know that it’s a package of useful high order components (HOC). But before using created HOCs by other developers you should know how to create a simple React component, how to compose it with other components and how to create own HOC. recompose The same with Redux Lazy. It’s not a new store library. It’s just a wrapper, with a little bit magic (yes, I know that magic in code is not a good practice) you can save up to 50% of time on creating React / Redux app. Before start describing Redux Lazy I want to show the main parts of working with Redux. Redux is a store. You can read a lot of manuals and articles with documentation or good practices. But store is always a store. It’s a place where you can save your data. For redux to get data you should create selectors (like SQL SELECT) for react-redux connect HOC and action types, action creators and reducers to set data using store dispatch. So I’ll show each point of working with redux here: Action types: NAME_SPACE_TEXT = '@@nameSpace/TEXT'; export const Here I just created one action type. It should help with storing text field to store. Name space I use to split a big app into small modules with own components, store (using combineReducers) and logic (I use ). redux-observable Action creator: { NAME_SPACE_TEXT } './types'; import from textAction = text => ({type: NAME_SPACE_TEXT,text,}); export const Reducer: { NAME_SPACE_TEXT } './types'; import from defaultState = {text: '',}; const (state = defaultState, action) => { (action.type) { NAME_SPACE_TEXT: { ...state, ...action }; : state;}}; export default switch case return default return This is a simple reducer. The main idea is just check action type and if it’s our text action, create a new state using previous state with action. Container: { connect } 'react-redux'; as actions './actions'; import from import * from mapStateToProps = state => state[NAME_SPACE]; mapDispatchToProps = { ...actions }; const const connect(mapStateToProps, mapDispatchToProps); export default Here I use the same name space to get part of store in my module. helps me to wrap my action creators with store dispatch function. mapDispatchToProps I need to add reducer to store: { combineReducers } 'redux'; nameSpace './reducer'; import from import from rootReducer = combineReducers({... ,}); const nameSpace And wrap component by the container: import Container from './container';import Component from './component'; Container(Component); export default That’s all. Each time to make a new feature you should create types, creators, reducers, containers… instead of thinking about your app logic. To save my time I created Redux Lazy. It can make all this stuff for your. You need to describe which actions do you need and get it. So let me introduce Redux Lazy. To use it you should make some small steps. First step is installing redux-lazy: npm i -S redux-lazy Or with yarn: yarn add redux-lazy The second step is creating creating Redux Lazy model: RL 'redux-lazy'; import from rl = RL('modelName'); const new const {nameSpace,types,actions,defaultState,reducer,mapStateToProps,mapDispatchToProps,Container,} = rl. (); flush Here we should set a name space of our model. For example I use name space. modelName And it creates nameSpace, types, actions, reducer, container… for you. Next you should think which fields in store do you need. Imagine that you are working with SQL table. You need to have name for it (than’s why I use name space) and fields. modelName For example, from the previous example, we need only one field — . So your job is making getter and setter for this field. text addEventAction(name) If you need to send event to redux-observable you need to create action type with only one field: . And epics can run some jobs for you. type RL 'redux-lazy'; import from rl = RL('modelName'); const new rl.addEventAction('event'); { types, actions } = rl. (); const flush { MODEL_NAME_EVENT } = types; { eventAction } = actions; const const { MODEL_NAME_EVENT, eventAction }; export rl; export default eventAction() // => { : MODEL_NAME_EVENT } type eventAction(anyData) // => { : MODEL_NAME_EVENT } type addFormAction(name); If you need to submit form with redux actions you need to work with events and put function into form component. There is a good practice to use links instead of objects or functions inside a components. Because it always creates a new instances and React should render again component even if data is the same. <form onSubmit={(event) => {event.preventDefault();props.submitAction();}}> With Redux Lazy you can avoid useless rendering: rl.addFormAction('submit'); <form onSubmit={ }> props.submitAction addFormElementAction(name, defaultValue) The same for form elements. Each time you should get value from event (event.target.value): <inputtype="text"onChange={ }value={props.title}/> event => props.titleAction(event.target.value) With Redux Lazy you can make it much easy: rl.addFormElementAction('title', ''); <inputtype="text"onChange={ }value={props.title}/> props.titleAction addParamAction(name, defaultValue) It’s the same like addFormElementAction but with simple data instead of event object. It’s totally the same like any redux action creator: rl.addParamAction('title', 'defaultValue'); { actions } = rl. (); { titleAction } = actions; const flush const titleAction('data')// => {type: '@@modelName/TITLE', title: 'data'} titleAction()// => {type: '@@modelName/TITLE', title:'defaultValue'} addParamsAction(name, payload) If you need to set more than one field you can use addParam Action: s rl.addParamsAction('clear', { title: '', body: '' }); { actions } = rl. (); { clearAction } = actions; const flush const clearAction('1', '2') // => { title: '1', body: '2' } clearAction('1') // => { title: '1', body: ''} clearAction() // => { title: '', body: '' } Redux Lazy really helps me to speed up my React / Redux development. But some times it’s hard to get all actions, types… I know how it works and what I can get from . But first time maybe you can run and see what types, actions, nameSpace… are inside. rl.flush() console.log(rl) I think it’s not a great payment for development speed. You can see more . examples Please ask your questions in comments and don’t forget to star it on . github

Target

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

React/Redux development on steroids

Too Long; Didn't Read

Company Mentioned

Evheniy Bystrov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

React/Redux development on steroids

Too Long; Didn't Read

Company Mentioned

Evheniy Bystrov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES