React Reasm
I think that convention over configuration.
This is a repo of react and redux burket and I want to simplify redux flow for a react production. I think that a react production is following some rules is beneficial prefer to not. So I try to make a method of "avoid unnecessary troubles" by some rules and conventions.
Warning: The repo is in testing status now. I don't recommend using this in publishing production. But I hope to received suggestion for the repo, thanks.
Install
It likes a introduction more than a library. But I accumulate react burket in the repo.
npm install react-reasm
And the repo is contains these libraries.
react-redux
redux
redux-observable
reselect
rxjs
Introduction
I hope the redux flow is following the rule in every time.
- define actions
const SampleActionType = TODO_LIST_CLEAR: 'SAMPLE_ACTION_TODO_LIST_CLEAR' const SampleRequestType = TODO_GET_LIST: 'SAMPLE_REQUEST_TODO_GET_LIST' TODO_ADD_ITEM: 'SAMPLE_REQUEST_TODO_ADD_ITEM' const SamplePayloadType = TODO_LOADED: 'SAMPLE_REQUEST_TODO_LOADED' TODO_ERROR: 'SAMPLE_REQUEST_TODO_ERROR' TODO_LIST: 'SAMPLE_REQUEST_TODO_LIST' TODO_LIST_ITEM: 'SAMPLE_REQUEST_TODO_LIST_ITEM'
We can classify actions into three parts likes "actions", "requests", "payloads" I think that http requests is most commonly in any project, so I distinguish the http request status of "requests" and "payloads"
This mind, May I not using the common actions, will verify in future. I think that it's unnecessary actions for a well design project.
- create actions
const sampleActions = type: SampleActionTypeTODO_LIST_CLEAR const sampleRequests = type: SampleRequestTypeTODO_GET_LIST type: SampleRequestTypeTODO_ADD_ITEM params: item const samplePayloads = type: SamplePayloadTypeTODO_LIST payload: data type: SamplePayloadTypeTODO_LIST_ITEM payload: data type: SamplePayloadTypeTODO_ERROR error: data type: SamplePayloadTypeTODO_LOADED
- configure mapper
const sampleRequestMapper = SampleRequestTypeTODO_GET_LIST: target: mockApigetTodoList payload: samplePayloadssetTodoList failure: samplePayloadssetTodoError SampleRequestTypeTODO_GET_LIST: target: mockApiaddItem payload: samplePayloadssetTodoListItem failure: samplePayloadssetTodoError
The mapper can redirect your request action to target
.
Attaction the target must be a Promise
.
I consider supporting the "async function"
- update reducer
const initialState = todo: list: const reducerMapper = SampleActionTypeTODO_LIST: ...state todo: ...statetodo list: initialStatetodolist SamplePayloadTypeTODO_LIST: ...state todo: ...statetodo list: actionpayload SamplePayloadTypeTODO_LIST_ITEM: ...state todo: ...statetodo list: ...statetodolist actionpayload const sampleReducer =
This only transform the reducer structs from "switch" to "mapper".
I like "mapper" perfer "switch" becauce "mapper" only provide defined method to operation.
- set selector
const sampleSelector = statesampletodo const selectSampleTodos = selectors: sampleSelectortodos
The default selector likes (state) => state.sample.todo
. But I think it's not very well.
You can use the defalut selector for you like.
- configure store
;const store =
In the end, you must configure store and set into Provider
like redux.
- connect component
;const injectStateProps =todoList:const injectActions =getTodoList: sampleRequestgetTodoListaddTodoItem: sampleRequestaddTodoListItemconst TSample = {const todoList getTodoList addTodoItem = propsreturn...}const Sample =TSample
The Injector
is combined the connect
for react-redux
.
If it not work, you can see the sample project todolist.
Request Status
Request status is a common props for a most of project. So I provide a method for manange request status
const initialState = ... requests: loading: {} error: {} success: {} const sampleReducer =
When you set requestTypes
and payloadTypes
in createReducer
, You can select the request status by reducer.
; const sampleSelector = ... statesamplerequests const selectSampleRequests = selectors: sampleSelectorrequests
It likes normal selector but the function combineRequests
select request status for you like,
;const injectStateProps =...status:success:const TSample = {const status success = propsreturn...}
By the design, I think that the most complex module is selectors. I will solve this question in future.
Inject Components
You can append any components in the injected component. But I recommend to inject "modals" and "redirect" etc.
If you want inject modals, I recommend the other repo for inject modals react-debris
const TModal = {const onClose = {propshooks}return<div onClick=onClose>Test Content</div>}const Modal = Popupconst injectComponents ={const hooks = PopupReactreturn <Modal hooks=hooks />}const TSample = {const testModal = propsconst onClickHandle = {testModal}return...}const Sample =TSample
You can inject Redirect
by react-router-dom
also.
NOT USABLE
const injectComponents ={const redirect setRedirect = Reactreturn redirect && <Redirect to="/" />}const TSample = {const redirectToHome = propsconst onClickHandle = {props}return...}const Sample =TSample
Examples
These examples was built by create-react-app
and you can run npm start
in the example of todolist
Simple Road Map
- Clean up the code. (Because these code only usable now.)
- Complate typescript. (The reason is the same as the previous.)
- More rules. (I think that convention over configuration.) ...