CODEWITHSUNDEEP
javascriptreactjsredux
Dan Zuzevich
Dan Zuzevich

Reputation: 3831

React Redux Confusion

Redux has proven a little tricky for me to wrap my head around, and I was wondering if someone could help point me in the right direction of what piece I am not grasping to get my desired results. Just a forewarning: I am using ES6 syntax.

Okay, so I have setup somewhat of a sandbox to test out how redux works, and this is the current file setup I am working with.

-actions
  --index.js
-reducers
  --index.js
  --reducer_user.js
-containers
  --ReduxTest.js

In my container, ReduxTest.js, I have the following code.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchUser } from '../actions/index';

class ReduxTest extends Component {
  render() {
    return (
      <div>
        {console.log(this.props.fetchUser())}
        {console.log(this.props.user)}
      </div>
    )
  }
}

export default connect( null, { fetchUser } ) (ReduxTest);

When I render ReduxTest.js to the screen, the first console.log statement shows up as,

Object { type: "FETCH_USER", payload: "This is just a test."}

The second one however, shows up as "undefined".

Here is what my actions index.js looks like,

export const FETCH_USER = 'FETCH_USER';

export function fetchUser() {
  const testing = "This is just a test.";
  return {
    type: FETCH_USER,
    payload: testing
  }
}

Here is my reducer_user.js file

import { FETCH_USER } from '../actions/index';

export default function(state = null, action) {
  switch(action.type) {
    case FETCH_USER:
    return action.payload;
  }
    return state;
}

and finally, here is my index.js in the reducer folder

import { combineReducers } from 'redux';
import UserReducer from './reducer_user';

const rootReducer = combineReducers({
  user: UserReducer
});

export default rootReducer;

I am using a video tutorial from Udemy, so that is where I am getting some of my syntax and what not. I was under the impression that I would be able to access "this.props.user" from the index.js reducer, but I am doing something wrong, or missing a step. Any help would be appreciated.

Just so I am clear, all my intention is, is to successfully have the ReduxTest container console log JUST the string that is in the payload. if you can help with that, I think I can carry it on from there. Thanks =)

Upvotes: 2

Views: 469

Answers (1)

user5520186
user5520186

Reputation:

You're only passing the action creator to your component. If you want to access your props.user than you have to provide it. You can achieve this by the first argument of the connect function.

const mapStateToProps = state => ({
  user: state.user,
});

export default connect(mapStateToProps, { fetchUser })(ReduxTest);

The first argument of connect must be a callable function. The only argument of this function is the current state. The function must return an object, containing all properties you want to access inside your component.

Please notice that the state of your user reducer is set to null initially. Redux fires multiple, internal actions. If you log your current state in your render method, it can happen, that your state gets logged before you are calling your own actions. This can be confusing.

You can change the initial state of your reducer this way:

import { FETCH_USER } from '../actions/index';

export default function(state = 'User not fetched yet', action) {
  switch(action.type) {
    case FETCH_USER:
      return action.payload;
  }

  return state;
}

Upvotes: 2

Related Questions