Redux - reducers / action creators not properly associated with a component

I am learning how to use Redux, and I have a problem setting up actions and reducers. Here is my setup:

Actions here:

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

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

Gearboxes are here:

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;

The combination of gears is here in the file with the index:

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

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

export default combineReducers({
  userAuthReducer
});

Demo component:

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

I had a condition that worked earlier in a simpler way, but after looking at a few more manuals and deciding to introduce individual action creators (i.e. not just send from my component directly to the gearbox) and entering a few cases in my gearbox seems to be more does not work. console.log(this.props)on my component returns actions as functions and states as undefined.

Can anyone see where I made a mistake?

+4
source share
2

.

,


()

.

export const LOGIN_USER = 'loginUser';

export const TOGGLE_REG_LOG = 'toggleRegLog';

,

.

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
  • 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;

onClick , loginUser, , loginUser, , , ,

:

  • constructor,
  • , , redux.

.

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);

/, , , , .

+4

: newState , .

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


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

: json, loginStatus. . " ". initail , , , .

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);  
0

Source: https://habr.com/ru/post/1686656/


All Articles