Trying to understand react/redux

1

Hi,
Some experimental code that should toggle some ‘on’ /‘off’ string , using both react and redux.
I’m still very very new to both , and not even done with the redux course here yet.

I would like to know who terribly wrong this code is ? Off course it’s not working ,but maybe I’m close to how it should be done.

Thanks in advance!
:slight_smile:

const defaultState ={
   on: true
}
const reducer = (action,state = defaultState) => {
  return (action.type==='on')?{off:true}:(action.type==='off')?{on:true}:defaultState
}
const store = Redux.createStore(reducer);

const turnOn = () =>{
   return{
     type:'on'
   }
}
const turnOff =()=>{
   return{
     type:'off'
   }
}
class Parent extends React.Component{
    constructor(props){
       super(props);
       this.state={
          type: ''
       }
       this.toggle = this.toggle.bind(this)
    }
    toggle(state){
       if(type==='on'){
          store.dispatch(turnOff())
       } else {
          store.dispatch(turnOn())
       }
       this.setState((state) => ({
          type : state.type
       }));
    }
    render(){
      
      return(
        <div>
          <button  onClick={this.toggle}>toggle</button>
          <h1>State: {this.state.type}</h1>
        </div>
      );
    }
}

ReactDOM.render(
  <Parent/>,
  document.getElementById('container')
);
2

Hello @agate,

I see a major problem in your code: you are doubling the state!

You have both a type value into your Redux Store, as well as your Parent component holds its own type state internally.

To avoid bugs and errors the idea is to have a “single source of truth”, so for any given moment only one element should be responsible of holding the type state, all the others should be “read only”.
Your call if you want this to be Redux Store or the React Class.

small suggestion: why an object that will be shaped:

{
 on:  boolean,
 off: boolean
}

Don’t you think it’s over-complicated having to deal with both on/off labels?
Why not just:

active: true/false

Hope this helps :sparkles:

3 Likes
3

Thanks, that is new to me that there should only be one location for state, but it does make sense at least . & it should be simpler, but it was more for practice purpose.
I will try this , and see what happens :slight_smile:

4

I’m still stuck and ripping my hair out in frustration!!
I got this , it’s very simple , I would think, but I keep getting a 'type is undefined ’ error.
it’s experimenting a bit with the freecode camp concepts covered so far in redux.

Help :frowning:

thanks for any help btw, really appreciated.

const loginAction = () =>{
    return {
       type: 'login'
    }
}
const reducer = (action,state) => {
    return (action.type==='login')?{'login':true}:{'login':false}
}
const store =Redux.createStore(reducer);
store.dispatch(loginAction());

const currentState = store.getState(()=>
    this.state
); 

class App extends React.Component  {
  constructor(props){
     super(props)
  }
  render() {
    return (
       <div>
         {currentState}
       </div>
    );
  }
}
ReactDOM.render(<App/>,document.getElementById('container'));
5

Hey @agate, do you have a demo? This way it may be easier to give help.

Anyway, I think you are not connecting your Redux store with the React component.
In general you want a Provider that pass the store data as props to a component.
Have a look at the React-Redux documentation for further tutorial
https://react-redux.js.org/introduction/quick-start

Normally what you want to end up with is something like:

import React from 'react'
import ReactDOM from 'react-dom'

import { Provider } from 'react-redux'
import store from './store'

import App from './App'

const rootElement = document.getElementById('root')
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

As you can see you need a Provider component that connects to your store so your components can read and dispatch actions.

The Redux team has a working example of a counter app, you could use it as comparison to your own project and see what you are missing :slight_smile:

1 Like
6

Thanks, I’m still very new to this. I was confused how to connect the redux store to the react components, or thought I was doing it at least.
I just need more tutorials , too new still to experiment :stuck_out_tongue:

7

Not much of a Redux guy, but don’t you need to switch the parameters for the reducer?

Shouldn’t it be (state, action) and not (action, state).

8

Yes, I know I was messing up big time, parameter order matters. I’m now following buckys (thenewboston) tutorial on youtube, really helps & is nostalgic :slight_smile: