I can't access the redux store properly in react components

Question

I am just started using redux in my react app and I have successfully added some values on my redux store.On the same component where dispatching happens I can access the store via

    store.getState();

but on other components I can't access it by mapStateToProps or the above method. I really need to why this happens.

index.js

const rootElement = document.getElementById("root");
ReactDOM.render(
<Provider store={store} > <App /> </Provider>, rootElement);

store.js

import { createStore } from "redux";
import rootReducer from "../reducers/index";
const store = createStore(rootReducer);
export default store;

reducer.js

const initialState = {
 token:"",email:"",uid:""
};

function userReducer(state = initialState, action) {
console.log("check ", state, action);

switch(action.type) {
    case "ADD_USER":
        return Object.assign({}, state, {
            token : action.token,
            email : action.email,
            uid : action.uid
        });
    default : return state;
}

}

export default userReducer;

action.js

const addUser = (token,email,uid) => ({
type:"ADD_USER",token:token,email : email,uid:uid    
})
export default addUser;

login.js

function mapDispatchToProps  (dispatch) {
console.log(dispatch);
return { addUser : (token,email,uid)=>  dispatch(addUser(token,email,uid))
};}
class Sample extends React.Component {
constructor(props){
  super(props);
  this.state = {...........}
 }
 componentDidMount() {  

 let token = localStorage.getItem("myToken");
 let user = decode(token);
 let uid = user.id;
 let email = user.email;
this.props.addUser(token,email,uid);
console.log(this.props.state);
console.log(store.getState());
}
}
const mapStateToProps = state => {
return {state:state}
}

export default connect(mapStateToProps,mapDispatchToProps)(Sample);

anotherPage.js

export default function AnPage() {

const Data = useSelector(state=>state.userReducer);
useEffect(()=> {
somFunct(); },[]);
}
someFunct=() => {
console.log(Data) =>output is ({token: "", email: "", uid: ""})
return(
)
}

console output at reducer.js

check  {token: "", email: "", uid: ""}token: ""email: ""uid: ""__proto__: Object {type: "ADD_USER", 
token: "*******", email: "dfgsdhf@gmail.com", uid: 6264}

console.log(this.props.state)->

userReducer: {token: "", email: "", uid: ""}
__proto__: Object

console.log(store.getState()) ->

userReducer: {token: "*******", email: "dfgsdhf@gmail.com", uid: 6234}
__proto__: Object

I have edited the question.

the way you're doing it the redux state is in `this.props.state`. However this is a very bad way of doing it — apokryfos, Feb 11 '20 at 08:53
You need to provide the part of the state relevant to this component only. e.g. `const mapStateToProps = state => { return {componentProp:state.componentProp} }`. This way this component can access the property via `this.props.componentProp` and there won't be unnecessary props in the component — apokryfos, Feb 11 '20 at 09:12

score 1 · Accepted Answer · answered Feb 13 '20 at 10:52

I have found out that the reason for the initial values of state as output on other components was due to the fact that I was refreshing the page each time a new component was loaded.Since redux states have a special behaviour of wiping the state on refresh as I found in this stack I have to add 'Link' from react-router-dom to avoid refreshing and used redux-persist library to load the state if refreshed for other reasons.

I hope this will be helpful for someone who comes across on these kind of issues.

score 0 · Answer 2 · answered Feb 11 '20 at 08:51

0

You shouldnt declare the state again in the constructor . You will get the state from the props using the mapStateToProps method.

      export const mapStateToProps = function(state) {
  return {
    token: state.token,
    email: state.email,
    uid: state.uid
  };
};

  class Sample extends React.Component {
    constructor(props){
      super(props);
     }

answered Feb 11 '20 at 08:51

Test12345

1,625
1
12
21

state is a keyword in the Component Class . Try Renaming it to another name other than state and try – Test12345 Feb 11 '20 at 09:15
I understand what you are saying,but how does it relate to my problem.This is a sample on codesandbox.I couldnt find any problems while using state and props in same component. https://codesandbox.io/s/first-redux-app-x8zzp. – suryaa1996 Feb 11 '20 at 09:21
Yes . You are creating two states here . One with CreateStore of redux and other within the class component . Both are different – Test12345 Feb 11 '20 at 09:30

I can't access the redux store properly in react components

2 Answers2