3

Hi this question is a continue to this one!

I'm getting my routes dynamically via an ajax request (following this article in the official docs "Declaring resources at runtime"), I'm using an async function to return a list of resources from an ajax request.

What is the best way to dispatch an action to store meta data, which I got form ajax request in redux, for later access?

Also when user has not yet logged in, this function will not return anything, after logging in, user will have access to a couple of resources. What is the best way to reload resources?

Developerium
  • 7,155
  • 5
  • 36
  • 56

3 Answers3

0

To get this to work, I added a private variable, which I store the data mentioned in the question, and I access it via another function, which I exported from that file.

This gives me what I need, but I don't know if it's the best way to go.

Developerium
  • 7,155
  • 5
  • 36
  • 56
  • Can you show some code for this I am trying to do something similar but have created additional components to make the calls – Anagio Sep 13 '19 at 00:02
  • When I get the response from API, the first thing I do is to store it in that variable. It's just a local variable, which is also exported from that file. – Developerium Sep 14 '19 at 02:02
0

The best option is to use redux-saga. https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html

Then 

export function* async() {
  yield fetch(); //your Ajax call function
  yield put({ type: 'INCREMENT' }) //call your action to update your app
}

Incase you can't use redux-saga, I like your solution with private variable. You should go ahead with that.

Subhendu Kundu
  • 3,618
  • 6
  • 26
  • 57
  • Thank you for your answer, my question is for specific situation, in react-admin. Can you look into it? your answer is way too general – Developerium Feb 13 '19 at 06:06
  • @Developerium by looking at some of the files from react-admin, i can see they are also using redux-saga only. Check this out : https://github.com/marmelab/react-admin/blob/master/packages/ra-core/src/sideEffect/fetch.ts#L106 – Arpit Agrawal Feb 13 '19 at 06:13
  • @Developerium, this is an general issue with redux, redux-saga was introduced to fix this type of issues. I faced the same issue with my react-native app, thats why I decided with use `redux-saga`. – Subhendu Kundu Feb 13 '19 at 08:09
  • I tried this, but didn't get any thing in my reducer – Developerium Feb 17 '19 at 11:22
-1

https://github.com/redux-utilities/redux-actions

redux-actions is really simple to setup. Configure the store and then you can setup each state value in a single file:

import { createAction, handleActions } from 'redux-actions'

let initialState = { myValue: '' }

export default handleActions({
  SET_MY_VALUE: (state, action) => ({...state, myValue: action.payload})
})

export const setMyValue = createAction('SET_MY_VALUE')

export const doSomething = () => {
  return dispatch => {
    doFetch().then(result => {
      if (result.ok) dispatch(setMyValue(result.data))
    })
  }
}

Then in your component you just connect and you can access the state value

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

class MyComponent extends React.Component {
  render = () => (
    <span>{this.props.myValue}</span>
  )
}

MyComponent.propTypes = {
  myValue: PropTypes.string.isRequired
}

const mapStateToProps = (state) => ({
  myValue: state.myState.myValue
})

const mapDispatchToProps = () => ({})

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)
ageoff
  • 2,798
  • 2
  • 24
  • 39