Building React/Redux Application

Question

Making single page apps with redux and react, what would be the first thing to do? Create the logic of my state first with redux or make all the components react first?

score 1 · Answer 1 · answered Feb 28 '16 at 04:58

Probably the first thing to do is to establish your reducers functions. Here is an example. I'm using ES6 examples.

const INCREMENT = 'redux-example/counter/INCREMENT';

const initialState = {
  count: 0
};

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case INCREMENT:
      const {count} = state;
      return {
        count: count + 1
      };
    default:
      return state;
  }
}

export function increment() {
  return {
    type: INCREMENT
  };
}

Then you have to create a component:

import React, {Component, PropTypes} from 'react';
import {connectMultireducer} from 'multireducer';
import {increment} from 'redux/modules/counter';

@connectMultireducer(
  (key, state) => ({count: state.multireducer[key].count}),
  {increment}
)
export default class CounterButton extends Component {
  static propTypes = {
    count: PropTypes.number,
    increment: PropTypes.func.isRequired,
    className: PropTypes.string
  }

  props = {
    className: ''
  }

  render() {
    const {count, increment} = this.props; // eslint-disable-line no-shadow
    let {className} = this.props;
    className += ' btn btn-default';
    return (
      <button className={className} onClick={increment}>
        You have clicked me {count} time{count === 1 ? '' : 's'}.
      </button>
    );
  }
}

In your component you would connect the reducer state and actions to your component and then wrap them into a container and link them to HTML.

Hope this helps.

Hi, I've been on learning with es2015, and @ (operator?) kinda new look to me, kindly explain that? — MeetMahPuppy, Feb 28 '16 at 11:37
@ are decorators which lets you write less code to do redux connections. Here is a link to explain it in more detail. http://stackoverflow.com/questions/32646920/whats-in-the-redux-connect-decorator — Tony Jen, Feb 28 '16 at 14:42

score 1 · Answer 2 · answered Feb 28 '16 at 08:11

1

I think this largely depends whether you understand your data better or your UI better. I would write out a container component and just pass all my data as state into it then map it to props. From there you can decide which components need which part of the state tree. Then you can go about reasoning component design by following your data.

Here's a simple example I sketched out: https://github.com/matthewkturner/redux-simple-boilerplate

answered Feb 28 '16 at 08:11

Matthew K. Turner

135
1
9

Hmm, I think understanding the UI is better. Then you can understand the data right after. Though this is just my perception because I'm just a pure front-end dev with little knowledge with backend(php) – MeetMahPuppy Feb 28 '16 at 11:46
For a pro's stand point(no one would likely to view on not pro lol), what they do usually do? I can't find a good tutorial/example where to cover both. – MeetMahPuppy Feb 28 '16 at 11:49

score 1 · Answer 3 · answered Feb 28 '16 at 15:06

You'll make a mistake to do all components first OR all state first.

Just start with 1 component and hook it up to redux. Don't write state or components that are not necessary yet.

Better to start with code that is necessary and modify/refactor that code if a change is needed.

Pre-optimizing is painful when an assumption you had is incorrect and it turns out you have to rewrite your pre-written components. You'll always discover better ways to do things during the project so the more components and/or reducers you have at that time the more rework you'll have.

Building React/Redux Application

3 Answers3