我无法在React组件中正确访问Redux存储

suryaa1996

我刚开始在我的react应用程序中使用redux,我已经在redux商店中成功添加了一些值。在发生调度的同一组件上,我可以通过

    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;

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(
)
}

reducer.js的控制台输出

check  {token: "", email: "", uid: ""}token: ""email: ""uid: ""__proto__: Object {type: "ADD_USER", 
token: "*******", email: "[email protected]", uid: 6264}

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

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

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

userReducer: {token: "*******", email: "[email protected]", uid: 6234}
__proto__: Object

我已经编辑了问题。

suryaa1996

我发现在其他组件上输出state的初始值的原因是由于每次加载新组件时都会刷新页面的事实。由于redux状态具有特殊的行为,即在刷新时会擦除状态正如我在此堆栈中发现的那样,我必须从react-router-dom添加'Link'以避免刷新,并且如果由于其他原因而刷新,则使用redux-persist库加载状态。

我希望这会对遇到此类问题的人有所帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Hibernate无法在SQL Server中正确存储ZonedDateTime作为datetimeoffset

来自分类Dev

从子组件访问onChange事件(React / Redux)

来自分类Dev

如何在React-Native导航中正确使用Redux

来自分类Dev

存储在变量中的图像路径无法在模板中正确呈现

来自分类Dev

为什么Redux存储显示我的状态,但是react组件说它的状态未定义?

来自分类Dev

React Redux不会重置某些组件的存储

来自分类Dev

react-bootstrap Navbar无法在React js中正确呈现

来自分类Dev

尝试访问存储变量时,React Redux“无法读取未定义的属性'状态'”错误

来自分类Dev

如何在React功能组件中正确使用键?这是我的喜欢按钮:

来自分类Dev

如何在react-router中正确键入组件属性?

来自分类Dev

如何在Typescript中正确键入React ErrorBoundary类组件?

来自分类Dev

React:从组件中的Redux访问数据

来自分类Dev

React Native Redux-为什么我不能访问Redux存储中的数据并显示它们?

来自分类Dev

嵌套组件无法在Svelte / Sapper中正确渲染

来自分类Dev

如何在React App中正确导入组件?

来自分类Dev

无法在React中正确呈现Table

来自分类Dev

我的代码无法在Python中正确执行

来自分类Dev

我无法在angularjs中正确选择

来自分类Dev

为什么this.state.name无法在我的组件中正确使用?

来自分类Dev

Hibernate无法在SQL Server中正确存储ZonedDateTime作为datetimeoffset

来自分类Dev

React Native / Redux-无法访问Redux存储

来自分类Dev

react-redux 更新 redux 存储但不更新组件状态

来自分类Dev

无法通过 React-redux 中的连接访问存储

来自分类Dev

当我最初在 `<Provider>` 中分配它时,如何从子组件访问 `react-redux` 存储?>

来自分类Dev

WiX 导航从注册组件访问 redux 存储

来自分类Dev

状态存储未在 redux 中正确更新

来自分类Dev

如何从存储在列表中的字典中正确访问字典键?

来自分类Dev

React 表示组件无法使用 React 容器从 redux 存储中读取 <input /> 的值

来自分类Dev

无法访问组件中的 redux 状态

Related 相关文章

  1. 1

    Hibernate无法在SQL Server中正确存储ZonedDateTime作为datetimeoffset

  2. 2

    从子组件访问onChange事件(React / Redux)

  3. 3

    如何在React-Native导航中正确使用Redux

  4. 4

    存储在变量中的图像路径无法在模板中正确呈现

  5. 5

    为什么Redux存储显示我的状态,但是react组件说它的状态未定义?

  6. 6

    React Redux不会重置某些组件的存储

  7. 7

    react-bootstrap Navbar无法在React js中正确呈现

  8. 8

    尝试访问存储变量时,React Redux“无法读取未定义的属性'状态'”错误

  9. 9

    如何在React功能组件中正确使用键?这是我的喜欢按钮:

  10. 10

    如何在react-router中正确键入组件属性?

  11. 11

    如何在Typescript中正确键入React ErrorBoundary类组件?

  12. 12

    React:从组件中的Redux访问数据

  13. 13

    React Native Redux-为什么我不能访问Redux存储中的数据并显示它们?

  14. 14

    嵌套组件无法在Svelte / Sapper中正确渲染

  15. 15

    如何在React App中正确导入组件?

  16. 16

    无法在React中正确呈现Table

  17. 17

    我的代码无法在Python中正确执行

  18. 18

    我无法在angularjs中正确选择

  19. 19

    为什么this.state.name无法在我的组件中正确使用?

  20. 20

    Hibernate无法在SQL Server中正确存储ZonedDateTime作为datetimeoffset

  21. 21

    React Native / Redux-无法访问Redux存储

  22. 22

    react-redux 更新 redux 存储但不更新组件状态

  23. 23

    无法通过 React-redux 中的连接访问存储

  24. 24

    当我最初在 `<Provider>` 中分配它时,如何从子组件访问 `react-redux` 存储?>

  25. 25

    WiX 导航从注册组件访问 redux 存储

  26. 26

    状态存储未在 redux 中正确更新

  27. 27

    如何从存储在列表中的字典中正确访问字典键?

  28. 28

    React 表示组件无法使用 React 容器从 redux 存储中读取 <input /> 的值

  29. 29

    无法访问组件中的 redux 状态

热门标签

归档