Я не могу получить доступ к хранилищу избыточности в компонентах реагирования - PullRequest
Новая
       57

Я не могу получить доступ к хранилищу избыточности в компонентах реагирования

1 голос
/ 11 февраля 2020

Я только начал использовать избыточность в своем приложении для реагирования, и я успешно добавил некоторые значения в моем магазине избыточности. В том же компоненте, где происходит диспетчеризация, я могу получить доступ к хранилищу через 

    store.getState();

, но в другом Компоненты Я не могу получить к нему доступ с помощью mapStateToProps или вышеуказанным методом. Мне действительно нужно понять, почему это происходит.

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;

Редуктор. 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(
)
}

консольный вывод в редукторе. 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

Я редактировал вопрос.

Ответы [ 2 ]

0 голосов
/ 13 февраля 2020

Я обнаружил, что причина начальных значений состояния в качестве выходных данных для других компонентов была связана с тем, что я обновлял страницу каждый раз, когда загружался новый компонент. состояние на refre sh , как я обнаружил в этом стеке Я должен добавить 'Link' из response-router-dom, чтобы избежать обновления, и использовал библиотеку redux-persist для загрузки состояния, если оно обновляется по другим причинам.

Надеюсь, это будет полезно для тех, кто сталкивается с подобными проблемами.

0 голосов
/ 11 февраля 2020

Вы не должны снова объявлять состояние в конструкторе. Вы получите состояние из реквизита, используя метод mapStateToProps. 

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

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