score:2

Accepted answer

if you are needing route specific variables then its probably easiest (and best practice) to use the route params to initialize state and rerun actions.

if you use class based components loaduser(userid) will need to be in both componentdidmount and componentdidupdate.

for functional components there is react hook useeffect() instead (which seems to be becoming best/better practice these days).

for example:

if you are using react-router-dom in your routes.js/app.js you will have a route such as:

<route path='/some/path/:userid' component={somecomponent}/>

then use props.match.params and useeffect with the userid as a dependency:

import react , {useeffect} from 'react'
import {connect} from 'react-redux'
import * as actions from 'path/to/redux/actions'

// destructure `match.params.userid`, redux `user` and redux action `loaduser` from props
const somecomponent = ({ match:{params:{userid}} , user ,  loaduser}) => {

    useeffect(()=>{
      userid && loaduser(userid)
    },[loaduser , userid]) // runs after first mount and every time userid changes

    return <div>{user && user.id}</div>
}

connect(
    ({user})=>({user}),
    actions
)(somecomponent)

score:0

so first in your container component(any page/route) you can get the query string from the url and update the redux state accordingly

example:

import querystring from 'querystring';

const app (props){

//semulate the component did mount behavior 
useeffect(()=>{
     const {
     active_section,
     tab,
    //or what ever
    } = querystring.parse(history.location.search.replace('?', ''));

  props.updatestore({
    active_section,
    tab
   })
},[])

export default connect(app)

score:0

i think you can make use of switch and route components where you can decide the url and params to be passed to the component. once you're done with this then you can decide in the component itself to update the state in store.

but for initializing the store you can pass the generic state i.e. an empty state object or your home page state.

hope this helps!!

score:0

this example uses import { record } from immutable to save the initial state. if you want to update that from a query string, then you would call an action to update the state just like anything else. i would probably call the action in the constructor or componentdidmount().

  /*
  *
  * coursecontainer reducer
  *
  */

  import { record } from 'immutable';
  import {
     fetch_course_from_querystring,
     fetch_course_from_querystring_success
  } from './constants';

  const coursecontainerrecord = record({
     course: {
        coursetitle: '',
        ahecid: '',
        seatsremaining: 0,
        price: 0,
        hidden: true,
        canceled: false,
        objectives: '',
        credithours: '',
        description: '',
     },
     coordinators: [],
  });

  export const initialstate = new coursecontainerrecord({});

  function coursecontainerreducer(state = initialstate, action) {
     switch (action.type) {
        case fetch_course_from_querystring_success:
        // ... code
        default:
           return state;
     }
  }

  export default coursecontainerreducer;

  /*
  *
  * coursecontainer actions
  *
  */
  import toastr from 'toastr';

  import {
     fetch_course_from_querystring,
     fetch_course_from_querystring_success,
  } from './constants';

  // #region get course
  export function fetchcoursefromquerystring(courseid) {
     return {
        type: fetch_course_from_querystring,
        courseid,
     };
  }

  export function fetchcoursefromquerystringsuccess(course) {
     return {
        type: fetch_course_from_querystring_success,
        course,
     };
  }

edit i can add an example of dispatching if you need one.


Related Query

More Query from same tag