Redux без копипаста

Pavel Uvarov,
Software Engineer at Epam Ryazan
pavel_uvarov@epam.com

spiderpoul

poul_uvarov

Redux is a predictable state container 

What I like about Redux?

Predictable state management
Global state
Immutability
A lot of middleware

What we don’t like about Redux

"Configuring a Redux store is too

Post message
{
type: “SHOW_SUPPORT_PAGE”,
payload: { … }
}

Iframe React App

This tool will change the way you work with Redux

2-3x less

Special thanks to Yakov Zhmurov

React Redux Typescript + NASA API (nasa-app-react.netlify.app)

Too much boilerplate…

Less pain with React Redux Hooks

Even more with Typescript…

redux-act / redux-actions

Solutions to reduce boilerplate

Search Page store (Typescript)

Redux Toolkit (@reduxjs/toolkit )

createSlice - a function that accepts an initial

@reduxjs/toolkit - createSlice

Solutions to reduce boilerplate

Search Page store (Typescript)

@reduxjs/toolkit – createSlice + createAsyncThunk

dispatch(fetchSearchData(‘sun’))

Redux Toolkit Type safety

Solutions to reduce boilerplate

Search Page store (Typescript)

Elm is a functional language that compiles to JavaScript. 
It has a

State management with Elm

ELM:
update : Msg -> Model -> Model
JS:
const update = action

Wouldn’t that be great….

const initialState = {
name: ‘’,
password: ‘’
}
const setName =

Wouldn’t that be even greater….

Reducer
Action Creators
Types inference

Redux-blaze

{
type: “MY_FILTER_SET_CATEGORY”
category: ‘my category’
}

redux-blaze buildReducer

reducer – ready to use autogenerated reducer
actionCreators – ready to

Easy to create High-order Reducers

createReduxFetcher

react-redux-blaze - createReduxFetcher

All data keeps in redux global store
Strictly typed
Autogenerated reducer
Handles

Another example “Earth page”

Redux-blaze

Solutions to reduce boilerplate

Search Page store (Typescript)

After refactoring with redux-blaze

createSlice vs redux-blaze

Pros:
Customization
Cons:
Overcomplicated typing for TS
Poor type inference
Complicated configs
Read

Redux-blaze

Easy to understand and use
Easy to use with Typescript
Intellisense works even

Is Redux alive?

Should we use Redux in 2020 for React Apps?

I’d use Redux

redux-blaze
https://github.com/spiderpoul/redux-blaze
https://github.com/spiderpoul/react-redux-blaze
Nasa App
https://nasa-app-react.netlify.app/
https://github.com/spiderpoul/nasa-app-react/tree/redux-blaze
https://github.com/spiderpoul/nasa-app-react/tree/redux
https://github.com/zeit/swr
https://github.com/tannerlinsley/react-query