React-Reduxロード時にアクションを自動的に発生させる方法

Question

これは新機能です。

私はJWTトークンをロードしたReact-Reduxアプリケーションを持っています。その結果、アプリケーションはこれを「許可」設定で「true」に状態で示します。それは動作し、それは今、その認可を知っています。

Navbarには、「ログアウト」オプションがあります。このオプションをクリックすると、ローカルストレージから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); 

注私は単に認定場合は、別のリンクを表示するには「のisAuthorized」三元が含まれていること：

まず第一には、ここで承認などのためのテストでナビゲーションバーです。 「ログアウト」をクリックするとそれは私が減速ファイルにインポートされた別のファイルに「clearJWT」と呼ばれる機能を持っている...ログアウト

の

他の部分をその三元および更新を再確認すべきです。

export const clearJwt =() => { 
    localStorage.removeItem(TOKEN_KEY) 
} 

事は、私が「...ログアウト」それだけでレンダリングしなければならないということでオフ動作をハングアップし、上記の関数を使用して、ローカルストレージからJWTを削除することができない「イベント」があるんです。

私は、アクションとレデューサーを組み合わせた瞬間、少し後に分けていきます。

私は3つのファイルを持っています。トップにアクションがあるレデューサー。 Logoutコンテナ=> "logoutContainer"とログアウトは本当にシンプルな1つのライナです。

ここに私が設定したコードがあります。

（reducer.jsと呼ばれる）減速・ファイル内のアクション：

export const logoutUser =() => 
    (dispatch, getState) => { 
    clearJwt() 
     ({ type: LOGOUT_USER }) 
    } 

LOGOUT_USER用減速機オプション：

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) 

私は、単にlogoutUser（）を呼び出すcomponentWillMount（）のアクションを呼び出すことができたと思っていました。これは、また、「Logged out ..」をレンダリングし、メニューバーを更新します。

私は（うまくそれが仕事をdoesntので..私はしかし、それは私がこのアプローチが正しいと思ういけない、まだ...

呼ばイマイチ何とログアウトを変更didntの「componentDidMountを（）」を使用する必要があり示さthis質問を見つけました（LogoutUser（））を呼び出してページを再レンダリングするだけでなく、Navbarを持つようにするにはどうすればよいですか？Navbarの "ログアウト"リンクをクリックして "LogoutContainer" 「承認済み」の状態を再確認し、承認されていないこととナビゲーションバーを再レンダリングしたことを認識しましたか？

これは正しい方法ですか？さえ呼ばmycase「logoutUser（）」イマイチで

..

Answer 1

私のコメントは、その長いの答えとしてこれを掲示する必要がありますが、最初に提案し、いくつかのコードのクリーンアップとして扱います。あなたはそれを自分でテストしなければなりません。

まず、あなたの行動。これはアクションを記述する "サンクアクション"ハンドラの方法です。あなたはそれが別の関数を返す関数（それゆえにサンク）であることがわかります。あなたのコードでは、あなたは実際にそれを呼び出すことはありませんでした（これは何も呼び出されません、それはサンクで停止します）あなたはそれを使用する方法を読んでredux-thunkミドルウェアを使用したい場合、 。Redux-thunk docs.

第二に、あなたはあなたが行動習慣と呼ばれ、Reduxの習慣を受けるように、ディスパッチャを呼び出していない再レンダリングあなたのアプリを。

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

あなたの容器に@で述べたように、あなたが正しくサンクとアクションを使用する必要がありますコメントのsi2030

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) 

ライフサイクルをdidMountに変更しました。あなたは状態を設定し、再レンダリングする必要があります（reduxはあなたのためにこれを行います）。 WillMountはここで何の意味もありません。 React docs explains it.

また、この設定ではredux-thunkミドルウェアを使用しています。あなたの店でそれが初期化されていることを確認してください。 Redux-thunk docs.