A lib for fetching normalized data in a redux store through thunks.

Inspiration was taken from redux advices with async actions. A list of other frameworks like this could be found here. Also, see this post for a presentation based on the pass culture project.

Basic Usage

You need to install a redux-thunk setup with the dataReducer from fetch-normalize-data. You can also use the requestsReducer to have a status state of the request :

1import {
2  applyMiddleware,
3  combineReducers,
4  createStore
5} from 'redux'
6import thunk from 'redux-thunk'
7import { createDataReducer, createRequestsReducer } from 'redux-thunk-data'
8
9const storeEnhancer = applyMiddleware(
10  thunk.withExtraArgument({ rootUrl: "https://momarx.com" })
11)
12const rootReducer = combineReducers({
13  data: createDataReducer({ foos: [] }),
14  requests: createRequestsReducer()
15})
16const store = createStore(rootReducer, storeEnhancer)

Then you can request data from your api that will be stored in the state.data

react old school

1import React, { PureComponent } from 'react'
2import { requestData } from 'redux-thunk-data'
3
4
5class Foos extends PureComponent {
6  constructor () {
7    super()
8    this.state = { error: null }
9  }
10
11  handleFooClick = foo => () => {
12    const { dispatch } = this.props
13    dispatch(requestData({
14      apiPath: '/foos',
15      body: {
16        isOkay: !foo.isOkay
17      },
18      method: 'PUT'
19      handleFail: (state, action) =>
20        this.setState({ error: action.payload.error })
21    }))
22  }
23
24  componentDidMount () {
25    const { dispatch } = this.props
26    dispatch(requestData({
27      apiPath: '/foos',
28      handleFail: (state, action) =>
29        this.setState({ error: action.payload.error })
30    }))
31  }
32
33  render () {
34    const { foos, isFoosPending } = this.props
35    const { error } = this.state
36
37    if (isFoosPending) {
38      return 'Loading foos...'
39    }
40
41    if (error) {
42      return error
43    }
44
45    return (
46      <>
47        {(foos || []).map(foo => (
48          <button
49            key={foo.id}
50            onClick={this.handleFooClick(foo)}
51            type="button"
52          >
53            {foo.isOkay}
54          </button>
55        ))}
56      </>
57    )
58  }
59}
60
61const mapStateToProps = state => ({
62  foos: state.data.foos,
63  isFoosPending: (state.requests.foos || {}).isPending
64})
65export default connect(mapStateToProps)(Foos)

NOTE: We could also used a handleSuccess in the requestData api, in order to grab the action.data foos. In that case, code to be modified is:

1constructor () {
2  this.state = { error: null, foos: [] }
3}
4
5handleFooClick = foo => () => {
6  const { dispatch } = this.props
7  dispatch(requestData({
8    apiPath: '/foos',
9    body: {
10      isOkay: !foo.isOkay
11    },
12    method: 'PUT'
13    handleFail: (state, action) =>
14      this.setState({ error: action.error })
15    handleSuccess: (state, action) => {
16      const { foos } = this.props
17      const nextFoos = foos.map(foo => {
18        if (foo.id === action.payload.datum.id) {
19          return {...foo, action.payload.datum }
20        }
21        return foo
22      })
23      this.setState({ foos: nextFoos })
24    },
25  }))
26}
27
28componentDidMount () {
29  const { dispatch } = this.props
30  dispatch(requestData({
31    apiPath: '/foos',
32    handleFail: (state, action) => this.setState({ error: action.payload.error }),
33    handleSuccess: (state, action) => this.setState({ foos: action.payload.data }),
34    method:'GET'
35  }))
36}
37
38render () {
39  const { error, foos } = this.state
40  ...
41}

But if your rendered foos array should be coming from a memoizing merging (and potentially normalized) (and potentially selected from inter data filter conditions) state of foos, then syntax goes easier if you pick from the connected redux store lake of data.

react hooks school

1import React, { useEffect, useState } from 'react'
2import { useDispatch, useSelector } from 'react-redux'
3import { requestData } from 'redux-thunk-data'
4
5const Foos = () => {
6  const dispatch = useDispatch()
7
8  const [error, setError] = useState(null)
9
10
11  const foos = useSelector(state =>
12    state.data.foos)
13
14  const { isPending: isFoosPending } = useSelector(state =>
15    state.requests.foos) || {}
16
17
18  const handleFooClick = foo => () =>
19    dispatch(requestData({
20      apiPath: '/foos',
21      body: { isOkay: !foo.isOkay },
22      method: 'PUT'
23      handleFail: (state, action) => setError(action.payload.error)
24    }))
25
26
27  useEffect(() =>
28    dispatch(requestData({
29      apiPath: '/foos',
30      handleFail: (state, action) => setError(action.payload.error)
31    })), [dispatch])
32
33
34  if (isFoosPending) {
35    return 'Loading foos...'
36  }
37
38  if (error) {
39    return error
40  }
41
42  return (
43    <>
44      {(foos || []).map(foo => (
45        <button
46          key={foo.id}
47          onClick={handleFooClick(foo)}
48          type="button"
49        >
50          {foo.isOkay}
51        </button>
52      ))}
53    </>
54  )
55}