#react-redux

회고: Node blog app

Node.js 백엔드와 React 프론트엔드로 작성된 블로깅 서비스 앱입니다.

기술 스택 Node.js Express

Express는 Node.js에서 사용되는 웹 응용프로그램 작성을 위한 프레임워크입니다.

프론트엔드에서 데이터를 요청할 API를 제공하는 웹앱이 작성되어 있습니다.

Passport

Passport는 Node.js에서 사용되는 인증 프레임워크입니다.

이번 프로젝트에서는 정의된 모델을 사용하는 로컬 인증을 사용합니다.

Sequelize

Sequelize는 프로미스 기반의 Node.js ORM 입니다.

이번 프로젝트의 DBMS 는 MariaDB를 사용합니다.

React

React는 페이스북에서 오픈소스로 개발을 진행중인 UI 작성을 위한 자바스크립트 라이브러리입니다.

이번 프로젝트에서는 가능하면…

If you look at the official Usage with React documentation on Redux' website you might be confused by the way they conflate their "simple" example with a lot of ES6 shorthand and the Container/Component design pattern. After a very steep learning curve and parsing what is Redux and what is the over-engineered example todo application, it turns out Redux on your React project is very simple.

Getting started with Redux requires you to understand a couple of simple concepts:

Redux is your global store for state

Redux acts as a global store for all the state in your application. Instead of playing "thread the props" up and down components, Redux acts as the one source of truth for your state. You will use its API to update state and rely on its API to pass props into your components.

To update state, dispatch it

Instead of using setState in your components, you'll be using Redux's dispatch method to "dispatch" a state update. You will pass an object to the dispatch command describing the updated state. Usually this consists of the "type" of update and the "data" associated with the update. This basically looks something like:

Use reducers to update state with new values

Dispatching state updates will be received by Redux and passed through reducers. A reducer is basically a JavaScript function that receives the state in its current value and information about the dispatched state update. The reducer function is expected to return a copy of the state in its updated form. This functions very much like the Array.reduce() JavaScript method.

You connect your Components to your Redux store

Since Redux is your global, central store for all state, you'll need to connect your React Components to that store whenever you want to map state values from Redux as properties on your Components.

A truly simple example

I'm using the ES6 structure to write some of the React code here as its the recommended method going forward for writing React components. Other pieces are left using standard JavaScript for clarity.

When trying out react-redux samples today, I was stuck on a strange error – actually it seemed strange to be because I couldn’t understand the syntax, but whatever.

I’m documenting it here in case I forget and make the same mistake again:

Error:

Warning: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. 

And eventually:

Uncaught RangeError: Maximum call stack size exceeded 

Scenario:

React application that had following “shape”; basically, the counter increments/decrements counter state based on “counter mode” which is either “inc” or “dec”:

A. App a. CounterContainer i. Counter ii. CounterModeToggle

CounterContainer is the owner of the state; a sample state object could be represented as {count: 1, mode: "inc"}.

Whenever CounterModeToggle fired its "onToggle" function (that was passed to it by CounterContainer), it worked. However, when Counter fired its "onTick" function (that basically invoked its action-creator and passed it to redux store (via the connect method of react-redux), it gave the error mentioned above.

Explanation:

Searching for the error turned up this SO answer: https://stackoverflow.com/questions/27172358/reactjs-passing-methods-as-props-to-child -– it is precise in its explanation about why it happened in the first place.

What I understood is:

onClick of ReactComponent expects a function that will be fired when the synthetic event fires.

When I use the form onClick={onTick(currentMode)} it means:

execute onTick with currentMode as the parameter when rendering this button. It causes the redux-store to mutate its state (that's how the reducet was written) which causes a re-render of the same react component! This is completely not what I was trying to do.

The correct way to say "execute this function when onClick synthetic event is fired" is to either:

wrap the invocation into another function (this is what onClick={() => onTick(currentMode)} does) or

use the bind function to supply the parameter. This keeps the onTick to be a function being passed as parameter as opposed to being invoked whenever being renderd (which is what onClick={onTIck(..)} does!

I personally feel that the bind way is more natural but I'm not sure if there are an upsides/downsides of using it one way or other.

Code:

components/App.js

import React from 'react' import CounterContainer from '../containers/CounterContainer.js'; const App = () => ( <CounterContainer /> ) export default App

container/CounterContainer.js

import React from 'react'; import { connect } from 'react-redux' import Counter from '../components/Counter.js' import ToggleCounterMode from '../components/ToggleCounterMode.js' import { counterTickAction, counterToggleAction } from '../actions' const PureCounterContainer = ({ currentCounter, onTick, currentMode, onToggle }) => ( <div className="counter-container"> <Counter currentMode={currentMode} currentCounter={currentCounter} onTick={onTick} /> <ToggleCounterMode currentMode={currentMode} onToggle={onToggle} /> </div> ); const mapStateToProps = (state, ownProps) => { console.log('CounterContainer::mapStateToProps - state:%o, ownProps:%o', state, ownProps); return { currentCounter: state.counter, currentMode: state.mode } } const mapDispatchToProps = (dispatch, ownProps) => { console.log('CounterContainer::mapDispatchToProps - dispatch:%o, ownProps:%o', dispatch, ownProps); return { onTick: (mode) => { dispatch(counterTickAction(mode)); }, onToggle: () => { dispatch(counterToggleAction()); } } } const CounterContainer = connect( mapStateToProps, mapDispatchToProps )(PureCounterContainer) export default CounterContainer

component/Counter.js