React-redux-area

Short: Simplified strongly typed redux (React specific methods)

Sub module for Redux-area with react specific method.

react-redux-area

react-redux-area on npmjs

react-redux-area github

redux-area

redux-area on npmjs

redux-area github

redux-area documentation (github wiki)

React method added:

This modules add react specific functionality to Redux-area

• useAreaHook
• useDispatchActions

This is a base example for a redux-area userArea (All of this is without use of react)

1// Define global area in for your redux store:
2// export interface IReduxState { user: IUserAreaState }
3// Define area state interface:
4export interface IUserAreaState {
5   currentUser?: IUser
6}
7// To define area factory like `AppAreaBase` see Redux-area docs.
8const area = AppAreaBase<IUserAreaState>({})
9// add fetch method (4 actions: request, success, failure, clear)
10export const loadUser = area.addFetch("loadUser")
11   .action((id:number)=>({id}))
12   .successProduce((draft, {user}) => {
13      draft.currentUser = user;
14   })
15   .clearProduce(draft => {
16      draft.currentUser = undefined;
17   })
18   .baseFailure()
19// add single action
20export const renameUser = area.add("renameUser")
21   .action((name:string) => ({name}))
22   .produce((draft, {name}) => {
23      drat.currentUser.name = name
24   })
25
26const userActions = {
27   load: loadUser.request
28   clear: loadUser.clear
29   rename: renameUser
30}
31
32export const UserReducers = area.rootReducer()
33

After this the examples uses react-redux-area and react specific functionality.

useAreaHook

Takes action from an area and a selector and create an area hook.

This is a wrap of useDispatchActions and a selector to make an easy hook.

Often its better to define the hook your self, if you want to export methods that should not be dispatch, like an Equal method ect..

1// Uses ex: (Add this line in the area file)
2const useUser = () =>
3  useAreaHook(userActions, (state: IReduxStore) => state.user)

Uses in component:

1const UserDetails: FC = () => {
2  const { currentUser: user, rename } = useUser()
3  return (
4    <div>
5      <b>
6        {user.name} ({user.age})
7      </b>
8      Rename: <input
9        value={user.name}
10        onChange={(e) => {
11          rename(e.target.value)
12        }}
13      />
14    </div>
15  )
16}

Actual implementation: Copy if custom hook is needed (you don't need the generic for your copy)

1export const useAreaHook = <
2  T extends MapMethodWithActionName<T>,
3  TReduxStoreState,
4  TAreaState
5>(
6  areaActions: T,
7  selector: (state: TReduxStoreState) => TAreaState
8) => {
9  const areaState = useSelector(selector)
10  const dispatchActions = useDispatchActions(areaActions)
11  return {
12    ...areaState,
13    ...dispatchActions,
14  }
15}

useDispatchActions

Takes a map of Action and create a new map of dispatch version.

Uses CreateDispatchAction (It exported but don't memorize the output, not recommended to use directly)

(CreateDispatchAction takes an Action created from area.add or area.addFetch and create a dispatch version of it.)

It will take your method and wrap it in a dispatch.

It will also add actionName and name from the Action

The actionName is shared by all 4 action for an addFetch, and can be use the track loading ect.

This memorize the new map that all method a safe to use in react dependency array for effect and other hooks.

1// It is recommended to only use this is an area hook (This is just show how it works)
2export const UserActions = useDispatchActions(areaActions)
3
4// Uses in component:
5const UserDetails: FC<{ name: string }> = ({ name }) => {
6  const { rename } = UserActions()
7  return (
8    <div>
9      Rename:{" "}
10      <input
11        value={name}
12        onChange={(e) => {
13          rename(e.target.value)
14        }}
15      />
16    </div>
17  )
18}

Install

1npm install react-redux-area

Or

1yarn add react-redux-area

Demo

(editable codesandbox.io)

Demo: Demo in React