redux-thunk-data

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 :

import {
  applyMiddleware,
  combineReducers,
  createStore
} from 'redux'
import thunk from 'redux-thunk'
import { createDataReducer, createRequestsReducer } from 'redux-thunk-data'

const storeEnhancer = applyMiddleware(
  thunk.withExtraArgument({ rootUrl: "https://momarx.com" })
)
const rootReducer = combineReducers({
  data: createDataReducer({ foos: [] }),
  requests: createRequestsReducer()
})
const store = createStore(rootReducer, storeEnhancer)

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

react old school

import React, { PureComponent } from 'react'
import { requestData } from 'redux-thunk-data'


class Foos extends PureComponent {
  constructor () {
    super()
    this.state = { error: null }
  }

  handleFooClick = foo => () => {
    const { dispatch } = this.props
    dispatch(requestData({
      apiPath: '/foos',
      body: {
        isOkay: !foo.isOkay
      },
      method: 'PUT'
      handleFail: (state, action) =>
        this.setState({ error: action.payload.error })
    }))
  }

  componentDidMount () {
    const { dispatch } = this.props
    dispatch(requestData({
      apiPath: '/foos',
      handleFail: (state, action) =>
        this.setState({ error: action.payload.error })
    }))
  }

  render () {
    const { foos, isFoosPending } = this.props
    const { error } = this.state

    if (isFoosPending) {
      return 'Loading foos...'
    }

    if (error) {
      return error
    }

    return (
      <>
        {(foos || []).map(foo => (
          <button
            key={foo.id}
            onClick={this.handleFooClick(foo)}
            type="button"
          >
            {foo.isOkay}
          </button>
        ))}
      </>
    )
  }
}

const mapStateToProps = state => ({
  foos: state.data.foos,
  isFoosPending: (state.requests.foos || {}).isPending
})
export 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:

constructor () {
  this.state = { error: null, foos: [] }
}

handleFooClick = foo => () => {
  const { dispatch } = this.props
  dispatch(requestData({
    apiPath: '/foos',
    body: {
      isOkay: !foo.isOkay
    },
    method: 'PUT'
    handleFail: (state, action) =>
      this.setState({ error: action.error })
    handleSuccess: (state, action) => {
      const { foos } = this.props
      const nextFoos = foos.map(foo => {
        if (foo.id === action.payload.datum.id) {
          return {...foo, action.payload.datum }
        }
        return foo
      })
      this.setState({ foos: nextFoos })
    },
  }))
}

componentDidMount () {
  const { dispatch } = this.props
  dispatch(requestData({
    apiPath: '/foos',
    handleFail: (state, action) => this.setState({ error: action.payload.error }),
    handleSuccess: (state, action) => this.setState({ foos: action.payload.data }),
    method:'GET'
  }))
}

render () {
  const { error, foos } = this.state
  ...
}

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

import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { requestData } from 'redux-thunk-data'

const Foos = () => {
  const dispatch = useDispatch()

  const [error, setError] = useState(null)


  const foos = useSelector(state =>
    state.data.foos)

  const { isPending: isFoosPending } = useSelector(state =>
    state.requests.foos) || {}


  const handleFooClick = foo => () =>
    dispatch(requestData({
      apiPath: '/foos',
      body: { isOkay: !foo.isOkay },
      method: 'PUT'
      handleFail: (state, action) => setError(action.payload.error)
    }))


  useEffect(() =>
    dispatch(requestData({
      apiPath: '/foos',
      handleFail: (state, action) => setError(action.payload.error)
    })), [dispatch])


  if (isFoosPending) {
    return 'Loading foos...'
  }

  if (error) {
    return error
  }

  return (
    <>
      {(foos || []).map(foo => (
        <button
          key={foo.id}
          onClick={handleFooClick(foo)}
          type="button"
        >
          {foo.isOkay}
        </button>
      ))}
    </>
  )
}