react state props counter VS redux counter

BackEnd_Ash.log·2020년 6월 28일
0

리덕스

목록 보기
2/3

containers/CounterContainer contains component/counter and moduels/counter.

containers/CounterContainer.js

import React from "react";
import {connect } from "react-redux";
import Counter from "../components/Counter";
import {increase , decrease} from "../modules/counter";

const CounterContainer=({number , increase , decrease }) => {
.....

react hooks

counter.js

import React, { useState } from 'react';

const Counter = () => {
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>
        counter :  <b>{value}</b> 입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

App.js

import React from 'react';
import Counter from './Counter';

const App = () => {
  return <Counter />;
};

export default App;

wow.. awesome

react redux start

  • first create-react-app

    npx create-react-app counter

  • second install modules

    npm install --save redux react-redux

/src/components/Counter.js

import React from "react";
const Counter = () => {
  return (
    <div>
      <h1>counter</h1>
      <button>increase</button>
      <button>decrease</button>
    </div>
  );
};

export default Counter;

src/App.js

import React from "react";
import Counter from "./Counter";

const App = () => {
  return (
    <div>
      <Counter />
    </div>
  );
};
export default App;

Action

action : a object referenced when causing a state change.

you are use increase button or derease button for increase , decrease at Counter value

Then... there are two things to make.
increase button and decrease button

store

  1. If you want to do something about the Store, issue an Action.
  2. When the Store's Reducer detects an Action, a new State is created.

reducer

reducer is function for state change
reducer is get tow parameter
first parameter is current state ,
and second parameter is action object

/src/modules/counter.js

import { createAction, handleActions } from "redux-actions";

// action type 
const INCREASE = "counter/INCREASE";
const DECREASE = "counter/DECREASE";

// action create function
export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);

//action initial
const initialState = {
  number: 0,
};

// reducer
const counter = handleActions(
  {
    [INCREASE]: (state, action) => ({ number: state.number + 1 }),
    [DECREASE]: (state, action) => ({ number: state.number - 1 }),
  },
  initialState
);

export default counter;

reducer merge

src/modules/index.js

you are use redux's built-in function combineReducers to combine reducers into one.

example..

import { combineReducers } from "redux";
import counter from "./counter";
import todos from "./todos";

const rootReducer = combineReducers({
  counter,
  todos,
});

export default rootReducer;

src/containers/CounterContainers.js

import React, { useCallback } from "react";
import Counter from "../components/Counter";
import { useSelector, useDispatch } from "react-redux";
import { increase, decrease } from "../modules/counter";

const CounterContainer = () => {
  const number = useSelector((state) => state.counter.number);
  const dispatch = useDispatch();
  const onIncrease = useCallback(() => dispatch(increase()), [dispatch]);
  const onDecrease = useCallback(() => dispatch(decrease()), [dispatch]);
  return (
    <Counter number={number} onIncrease={onIncrease} onDecrease={onDecrease} />
  );
};

export default CounterContainer;
profile
꾸준함이란 ... ?

0개의 댓글