Javascript React Redux如何在加载时自动启动操作

这是新的

我有一个React Redux应用程序，我在其中加载了一个JWT令牌，因此该应用程序在状态中通过授权设置=为“true”来指示这一点。这是可行的，它现在知道它的授权

在导航栏上，我有一个“注销”选项，我想单击该选项，并相应地从本地存储中删除JWT，并重新呈现导航栏以显示“登录”

首先，这里是带有授权等测试的导航栏：

import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from "react-bootstrap"
import { LinkContainer } from 'react-router-bootstrap'

class NavMenu extends Component {
  render() {
    const { isAuthorised, username } = this.props;

    return (
      <div className='main-nav'>
        <Navbar inverse collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to={'/'}>JobsLedger</Link>
            </Navbar.Brand>
            {<Navbar.Toggle />}
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav>
              <LinkContainer to={'/'}>
                <NavItem eventKey={1}><span className='glyphicon glyphicon-home'></span> Home</NavItem>
              </LinkContainer>
              <LinkContainer to={'/counter'}>
                <NavItem eventKey={2} ><span className='glyphicon glyphicon-education'></span> Counter</NavItem>
              </LinkContainer>
              <LinkContainer to={'/fetchdata'}>
                <NavItem eventKey={3}><span className='glyphicon glyphicon-th-list'></span> Fetch data</NavItem>
              </LinkContainer>
              {isAuthorised && (
                <NavDropdown eventKey={4} title="Clients" id="basic-nav-dropdown">
                  <LinkContainer to={'/clients/index'}>
                    <MenuItem eventKey={4.1}><span className='glyphicon glyphicon-th-list'></span> Client List</MenuItem>
                  </LinkContainer>
                  <LinkContainer to={'/clients/create'}>
                    <MenuItem eventKey={4.2}><span className='glyphicon glyphicon-user'></span> New Client</MenuItem>
                  </LinkContainer>
                  <MenuItem eventKey={4.3}>Something else here</MenuItem>
                  <MenuItem divider />
                  <MenuItem eventKey={4.4}>Separated link</MenuItem>
                </NavDropdown>
              )}
            </Nav>        
              {isAuthorised ? (
                <Nav pullRight>
                <NavItem eventKey={5}><span className='glyphicon glyphicon-user'></span> Hello {username}</NavItem>
                <LinkContainer to={'/logOut'}>
                  <NavItem eventKey={6}> Log Out</NavItem>
                </LinkContainer>
                </Nav>
              ) : (
                <Nav pullRight>
                  <LinkContainer to={'/login'}>
                    <NavItem eventKey={7} ><span className='glyphicon glyphicon-user'></span> Login</NavItem>
                  </LinkContainer>
                  </Nav>
                )}           
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  isAuthorised: state.login.isAuthorised,
  username: state.login.username,
})
export default connect(mapStateToProps)(NavMenu);

问题是没有“事件”，我可以挂断一个操作，因为它应该只是呈现“注销…”，并使用上面的函数从本地存储中删除JWT

目前，我已经将动作和减速器结合起来，但稍后将分开

所以我有三个文件。减速器的动作在顶部。Logout容器=>“logoutContainer”和Logout，这是一个非常简单的单行程序

这是我设置的代码

reducer文件（称为reducer.js）中的操作：

注销用户的reducer选项：

    case LOGOUT_USER:
    return {
      ...state,
      isAuthorised: false,
    }

这是我的logoutContainer：

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import Logout from './logout'
import { logoutUser } from './reducer'


class LogoutContainer extends Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }

  componentWillMount() {
    console.log('Logout - componentDidMount')
    logoutUser()
  }

  render() {
    return (
      <Logout />
    )
  }
}

const mapStateToProps = (state) => ({
  isAuthorised: state.login.isAuthorised,
})
const mapDispatchToProps = (dispatch) => ({
  logoutUser: () => dispatch(logoutUser()),
})

export default connect( mapDispatchToProps)(LogoutContainer)

import React，{Component，PropTypes}来自“React”
从“react redux”导入{connect}
从“./Logout”导入注销
从“./reducer”导入{logoutUser}
类LogoutContainer扩展组件{
静态上下文类型={
路由器：PropTypes.object.isRequired
}
组件willmount（）{
console.log（'Logout-componentDidMount'）
logoutUser（）
}
render（）{
返回(
)
}
}
常量mapStateToProps=（状态）=>({
IsAuthorized:state.login.IsAuthorized，
})
const mapDispatchToProps=（调度）=>({
logoutUser:（）=>调度（logoutUser（）），
})
导出默认连接（mapDispatchToProps）（注销容器）

我想我可以调用componentWillMount（）上的操作，该操作将调用“logoutUser（）”，该操作将更新状态，同时呈现“Logged out..”并更新菜单栏

我发现了一个问题，表明我应该使用“componentDidMount（）”，但它并没有改变任何东西，注销仍然并没有被调用

我认为这种方法不正确。。（好吧，它不起作用，所以这是一个线索）

如何单击导航栏上的“注销”链接，转到“LogoutContainer”，自动调用操作（logoutUser（））并重新呈现页面，以及如何让导航栏重新检查“已授权”状态并意识到其未授权并重新呈现导航栏

这样做对吗

---

在我的案例中，“logoutUser（）”甚至没有被调用..

我需要将此作为一个答案发布，因为它很想得到一条评论，但首先将其视为一个建议和一些代码清理。你必须自己测试一下

首先是你的行动。这是一种“thunk action”处理程序编写操作的方式。您可以看到它是一个返回另一个函数的函数（因此thunk）。在您的代码中，您从未实际调用过它（这就是为什么没有调用任何东西，它会在thunk处停止。如果您想使用redux thunk中间件，请仔细阅读如何使用它，它与“正常”调度稍有不同

其次，你没有呼叫调度程序，因此你的操作不会被调用，redux也不会重新呈现你的应用程序

export const logoutUser = () =>
  (dispatch, getState) => {
    clearJwt()
    dispatch({ type: LOGOUT_USER }) //Call the dispatcher with your action
  }

在您的容器中，您需要正确使用@si2030在评论中提到的thunk和actions

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import Logout from './logout'
import { logoutUser } from './reducer'


class LogoutContainer extends Component {
  componentDidMount() {
    this.props.logoutUser();
  }

  render() {
    return (
      <Logout />
    )
  }
}

const mapStateToProps = (state) => ({
  isAuthorised: state.login.isAuthorised,
});
//Just return a map with your actions and call them with this.props.yourAction
  const mapDispatchToProps = {
    logoutUser
  };

};
//Connect is a function that takes your state map and your actions map.
export default connect(mapStateToProps,mapDispatchToProps)(LogoutContainer) 

import React，{Component，PropTypes}来自“React”
从“react redux”导入{connect}
从“./Logout”导入注销
从“./reducer”导入{logoutUser}
类LogoutContainer扩展组件{
componentDidMount（）{
this.props.logoutUser（）；
}
render（）{
返回(
)
}
}
常量mapStateToProps=（状态）=>({
IsAuthorized:state.login.IsAuthorized，
});
//只需返回一张包含您的操作的地图，并使用此.props.yourAction调用它们
const mapDispatchToProps={
注销用户
};
};
//Connect是一个函数，它获取您的状态映射和操作映射。
导出默认连接（mapStateToProps、mapDispatchToProps）（LogoutContainer）

我还将生命周期更改为didMount。您需要设置状态、重新渲染等（redux将为您执行此操作）。WillMount在这里没有意义

---

请再次注意，此安装程序使用redux thunk中间件。请确保在您的应用商店中对其进行了初始化。

您是否应该使用props调用logoutUser（）？例如：this.props.logoutUser（）。我刚才才意识到您有两种类型的props，一种来自“mapstateTops”所在的state使用的是我不了解的另一套道具或道具（大多数情况下），在我的例子中是一个函数。它是在动作中创建的另一个道具。使用这个来启动动作，它与状态道具无关…我半小时前才得到这个，从我读到现在为止，它对我来说并不明显。一旦你把“this.props”位于logoutUser（）函数前面，它可以工作。感谢您指出这一点。现在它更有意义了。

export const logoutUser = () =>
  (dispatch, getState) => {
    clearJwt()
    dispatch({ type: LOGOUT_USER }) //Call the dispatcher with your action
  }

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import Logout from './logout'
import { logoutUser } from './reducer'


class LogoutContainer extends Component {
  componentDidMount() {
    this.props.logoutUser();
  }

  render() {
    return (
      <Logout />
    )
  }
}

const mapStateToProps = (state) => ({
  isAuthorised: state.login.isAuthorised,
});
//Just return a map with your actions and call them with this.props.yourAction
  const mapDispatchToProps = {
    logoutUser
  };

};
//Connect is a function that takes your state map and your actions map.
export default connect(mapStateToProps,mapDispatchToProps)(LogoutContainer)