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 }) => {
.....
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
first create-react-app
npx create-react-app counter
second install modules
npm install --save redux react-redux
import React from "react";
const Counter = () => {
return (
<div>
<h1>counter</h1>
<button>increase</button>
<button>decrease</button>
</div>
);
};
export default Counter;
import React from "react";
import Counter from "./Counter";
const App = () => {
return (
<div>
<Counter />
</div>
);
};
export default App;
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
- If you want to do something about the Store, issue an Action.
- When the Store's Reducer detects an Action, a new State is created.
reducer is function for state change
reducer is get tow parameter
first parameter is current state ,
and second parameter is action object
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;
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;
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;