Redux - コンポーネントに正しくリンクされていないレデューサー/アクションクリエーター

Question

Reduxの使用方法を学習しており、アクションとレデューサーの設定に問題があります。ここに私の設定です：

アクションはここにある：

export const loginUser = (test) => { 
     return { 
      type:'loginUser', 
      loggedIn:true 
     } 
} 

export const toggleRegLog = (test) => { 
     return { 
      type:'toggleRegLog', 
     } 
} 

レデューサーはここにある：減速の

let initialState = []; 

const userAuthReducer = (state = initialState,action) => { 
    switch (action.type) { 
    case 'loginUser': 
     let newState = [...state]; 
      if(action.loggedIn) { 
     newState = "logged-in"; 
      } else { 
       newState = "not-logged-in"; 
      } 
     return newState; 
      break; 
     case:'toggleRegLog': 
      let newState = [...state]; 
      return action.state; 
      break; 
    default: 
     return state; 
    } 
} 

export default userAuthReducer; 

コンビネーションは、インデックスと呼ばれるファイルにここにある：

import {combineReducers} from 'redux'; 
import userAuthReducer from './reducers/userAuthReducer'; 

function lastAction(state = null, action) { 
    return action; 
} 

export default combineReducers({ 
    userAuthReducer 
}); 

デモコンポーネント：

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as authActions from './actions/userAuthActions'; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    } 


componentDidMount() { 

    console.log(this.props) 
}  

    render() { 
    return (
     <div> 
       <button onClick={this.props.loginUser()}></button> 
     </div> 
    ); 
    } 

const mapStateToProps = (state) => { 
    return { 
     userAuthReducer:state.userAuthReducer 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators(authActions,dispatch); 
}; 

export default connect(mapStateToProps,mapDispatchToProps)(App);  
} 

私は以前より基本的な方法で作業していましたが、チュートリアルをいくつか見て、別のアクションクリエイターを導入することを決めました（つまり、コンポーネントからリデューサーに直接ディスパッチするだけでなく）それはもはや動かないようです。私のコンポーネントのconsole.log(this.props)は、アクションとして機能を返し、状態は未定義です。

誰でもどこが間違っているのでしょうか？

Answer 1

あなたはこのプロジェクトのセットアップで非常に多くのエラーを持っています。

あなたがのが

定数（見逃し）

定数あなたのコードを見てみましょう

---

を掲載コードを実行している場合は、それらを見る必要がありますあなたの活動に一貫性を持たせるために重要ですonsとreducers。

export const LOGIN_USER = 'loginUser'; 

export const TOGGLE_REG_LOG = 'toggleRegLog'; 

アクション

• がフォロー勧告だけのカップルあなたの行動、と間違って何もありません

  Flux standard action

• あなたが勝った場合はパラメータを宣言しないでください」使用しないでください
• アクションは再実行しません新しい州ではなく、reduxストアを変更する動作を記述します。

import { LOGIN_USER, TOGGLE_REG_LOG } from '../constants/userAuthConstants'; 

export const loginUser = (loggedIn = true) => { 
    return { 
    type: LOGIN_USER, 
    payload: { 
     loggedIn 
    } 
    } 
} 

export const toggleRegLog =() => { 
    return { 
    type: TOGGLE_REG_LOG, 
    } 
} 

レデューサー

あなたはcase: toggleRegLog:宣言に誤りがあります。 勧告：あなたは変数を宣言している場合は、別の名前代わりに広がりオペレータの

使用Object.assign

使用アクションのデータへの使用に限定されないので、

• は、ブロック（中括弧）でスイッチケースをラップ初期状態として、代わりにアレイの
• 使用オブジェクト

0123定数newState

使用を変更します

。

import { LOGIN_USER, TOGGLE_REG_LOG } from '../constants/userAuthConstants'; 

const initialState ={ 
    userLoginStatus: 'not-logged-in' 
}; 

const userAuthReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case LOGIN_USER: { 
     const userLoginStatus = action.payload.loggedIn ? 'logged-in' : 'not-logged-in'; 

     const newState = Object.assign(state, { 
     userLoginStatus 
     }); 

     return newState; 
    } 
    case TOGGLE_REG_LOG: { 
     let newState = Object.assign({}, state, {}); // do what you need here 

     return newState; 
    } 
    default: 
     return state; 
    } 
} 

export default userAuthReducer; 

コンポーネント

あなたはそれが関数コールバックを期待していますときにloginUser機能を実行されているボタンでonClickイベントを添付する場合は、代わりに、時にユーザーがクリックするので、それを実行せずにloginUserを渡しますボタンはアクションが派遣されます

おすすめ：

を使用して

• 避け、あなたはそれ
• 以内に何もしません場合は、あなたの再来店

からあなたが望む特定のプロパティを選択します。 「：TypeError例外：（不明）のイベントハンドラでエラー：未定義のプロパティ 『エラー』を読み取ることができません」私はボタンをクリックしたときに答えを提出するための

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { loginUser } from './actions/userAuthActions'; 

class App extends Component { 
    componentDidMount() { 
    console.log(this.props); 
    } 

    render() { 
    const { userLoginStatus, loginUser } = this.props; 

    return (
     <div> 
     <p> User status: {userLoginStatus}</p> 
     <button onClick={loginUser}>click me</button> 
     </div> 
    ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    userLoginStatus: state.userAuthReducer.userLoginStatus 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
    loginUser:() => dispatch(loginUser()) 
    }; 
}; 

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

Before you start testing any library/framework make sure, you are following the best practices, also that your code does not contain any error otherwise you can start having nightmares with your code.

Answer 2

アクション：ここでは、レデューサーで使用されているアクションにnewStateペイロードを追加しました。

export const loginUser =() => { 
    return { 
     type:'loginUser', 
     loggedIn:true 


    } 
} 
export const toggleRegLog =() => { 
     return { 
      type:'toggleRegLog', 
      newState: xyz, //whatever you want it to be 
     } 
} 

リデューサー： ここで私はloginStatusのためのフィールドを持つJSONオブジェクトに、あなたの初期状態を変更しました。他のフィールドを追加することによって、同じオブジェクトを使用して他のものを追跡することができます。私はフィールドの初期状態を「ログインしていない」に設定しました。レデューサーでは、スプレッド演算子を使用して初期オブジェクトの状態が新しいオブジェクトに広げられ、更新されるフィールドが上書きされます。

let initialState = { 
loginStatus:"not-logged-in", 
//other stuff 
}; 


const userAuthReducer = (state = initialState,action) => { 
    switch (action.type) { 
    case 'loginUser': 
     let newState = {}; 
      if(action.loggedIn) { 
     newState = {...state, loginStatus:"logged-in"}; 
      } else { 
       newState = {...state, loginStatus:"not-logged-in"}; 
      } 
     return newState; 
      break; 
     case:'toggleRegLog': 

      return {...state, loginStatus:action.newState}; 
      break; 
    default: 
     return state; 
    } 
} 

export default userAuthReducer; 

アプリケーションコンポーネント：

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as authActions from './actions'; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    } 


componentDidMount() { 

    console.log(this.props) 
}  

    render() { 
    return (
     <div> 
       <button onClick={this.props.loginUser}></button> 
     </div> 
    ); 
    } 
} 
const mapStateToProps = (state) => { 
    return { 
     userAuthReducer:state.userAuthReducer 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators(authActions,dispatch); 
}; 




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