React&Redux 에센셜
Redux&Redux 에센셜
우선, reduce, reducer, state, action의 정리
Reduce,Reducer,State,Action이란?
reduce -직역->바꾸기
reducer -직역->변화를 주는 것
state -직역->상태
action -직역->실행
정의
Reduce는 한 번에 함수를 적용하여 수행되는 값의 변화입니다.
Reducer는 적용되는 함수입니다.
State란, reduce되기 전의 초기 상태
Action이란 state가 어떻게 변경되는가?
예) 함수 F(a를 2배로 하는 처리를 한다(Action))
F(2) ->F(a) -Reduce->4
F(2)가 State,
F (a)는 Reducer입니다.
Redux 연습
가져오기
import { createStore } from 'redux'
간단한 예
Reducer에서는 Action에 의해 switch 문 등으로 State를 변경한다
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
게시판을 만들자
목표
JQuery에서 말하면,
<html>
<form>
<input type="text" id="hoge" />
<button onclick="push()">追加</button>
</form>
<ul id="list"></ul>
</html>
<script>
function push(){
let sentence = $("#hoge").val() ;
$("#list").append("<li>"+sentence+"</li>") ;
}
</script>
이런 것을 React&Redux의 기초를 바탕으로 설명.
install
React
npm은 설치된 환경이라고 가정합니다.
※하지 않은 분은 $brew install npm
$ npm install -g create-react-app
이렇게 react 설치
프로젝트 만들기
$ create-react-app todo
이런 느낌의 폴더를 할 수 있다고 생각합니다.
$ cd todo
todo로 이동합시다.
Redux
$ npm install --save redux react-redux redux-logger
todo 폴더에 Redux 설치
이것으로 환경 구축이 완료되었습니다.
디렉토리 만들기
액션
components
containers
reducers
라는 폴더를 src 아래에 배치
각 폴더에 todo.js를 만듭니다.
또한 src 아래에 createstore.js라는 파일을 만들어야합니다.
createstore.js에 함수 만들기
import { createStore as reduxCreateStore, applyMiddleware, combineReducers } from "redux";
import logger from "redux-logger";
import { todoReducer } from "./reducers/todo";
export default function createStore() {
const store = reduxCreateStore(
combineReducers({
todo: todoReducer,
}),
applyMiddleware(
logger,
)
);
return store;
}
React에 Redux 적용
index.js를 변경합니다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import createStore from './createstore';
const store = createStore() ;
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
redux, createstore를 가져 와서 Provider에 store를 설정하면됩니다.
serviceWorker.unregister ()는 오프라인 캐시를 비활성화합니다.
이것은 create-react-app를 하면 표준으로 붙어 있습니다. 지금은 무시하고 OK입니다.
Component 정의
components/todo.js
todo 추가를위한 텍스트 상자와 버튼을 씁니다.
import React from 'react';
export default class Todo extends React.Component{
render(){
return(
<div>
<input type="text" />
<button>追加</button><br />
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
</div>
);
}
}
Action 정의
actions/todo.js
export const addTodo = (todo) => {
return {
type: 'ADD_TODO',
payload: { todo: todo }
};
}
Action은 Reducer에 지시를 내립니다.
type 프로퍼티를 반드시 가지고 있어 이것이 처리의 키가 됩니다.
payload property는 처리에 사용하는 파라미터로, 이 예에서는 추가하는 TODO를 가지게 하고 있습니다
Reducer 정의
reducer.todo.js
const initialState = {
todoList: []
}
export const todoReducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_TODO':
// 新しく追加するTODO
const todo = action.payload.todo;
// stateを複製して追加
const newState = Object.assign({}, state);
newState.todoList.push(todo);
return newState;
default:
return state;
}
};
state는 rewrite가 아닌 새로운 객체입니다.
단순히 인수의 state에 추가하는 대신,
Object.assign 메소드로 복제한 새로운 state 에 추가해,
그것을 반환 값으로 설정합니다.
Component 정의
components/todo.js
import { connect } from 'react-redux';
import * as actions from '../actions/todo';
import Todo from '../components/todo';
const mapStateToProps = state => {
return {
todo: state.todo,
}
}
const mapDispatchToProps = dispatch => {
return {
addTodo: (todo) => dispatch(actions.addTodo(todo)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Todo)
mapStateToProps 함수
사용할 상태를 잘라내어 props에서 참조할 수 있는 함수
mapDispatchToProps 함수
dispatch 하기 위한 함수를 props 에 매핑 하기 위한 함수
각각 정의한 것을 connect 함수로 컴퍼넌트에 접속해 export합니다. 이렇게 하면 컴포넌트가 redux에 의한 상태 관리를 의식하지 않고, state나 dispatch를 참조, 실행할 수 있게 됩니다.
컨테이너의 사용법은, 컴퍼넌트를 import 하고 있는 개소를 컨테이너로 전환할 뿐.
app.js
import React, { Component } from 'react';
import './App.css';
//import Todo from './components/todo';
import Todo from './containers/todo';
Component 재작성
components/todo.js
import React from 'react';
export default class Todo extends React.Component {
state = {
todo: ''
}
render() {
console.log(this.props);
// StoreのTodoからリストを生成
const list = this.props.todo.todoList.map((todo, index) => <li key={index}>{todo}</li>)
return (
<div>
<input type="text" onChange={elm => this.setState({ todo: elm.target.value })} />
<button onClick={() => this.props.addTodo(this.state.todo)}>追加</button><br />
<ul>
{list}
</ul>
</div>
);
}
}
중복 코드가 될수록 redux의 혜택이 커집니다.
변경 사항을 즉시 알 수 있으므로 팀 개발이 기존보다 간단합니다.
Reference
이 문제에 관하여(React&Redux 에센셜), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/moyuta/items/a0b79adcf8e53e914715
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
가져오기
import { createStore } from 'redux'
간단한 예
Reducer에서는 Action에 의해 switch 문 등으로 State를 변경한다
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
게시판을 만들자
목표
JQuery에서 말하면,
<html>
<form>
<input type="text" id="hoge" />
<button onclick="push()">追加</button>
</form>
<ul id="list"></ul>
</html>
<script>
function push(){
let sentence = $("#hoge").val() ;
$("#list").append("<li>"+sentence+"</li>") ;
}
</script>
이런 것을 React&Redux의 기초를 바탕으로 설명.
install
React
npm은 설치된 환경이라고 가정합니다.
※하지 않은 분은 $brew install npm
$ npm install -g create-react-app
이렇게 react 설치
프로젝트 만들기
$ create-react-app todo
이런 느낌의 폴더를 할 수 있다고 생각합니다.
$ cd todo
todo로 이동합시다.
Redux
$ npm install --save redux react-redux redux-logger
todo 폴더에 Redux 설치
이것으로 환경 구축이 완료되었습니다.
디렉토리 만들기
액션
components
containers
reducers
라는 폴더를 src 아래에 배치
각 폴더에 todo.js를 만듭니다.
또한 src 아래에 createstore.js라는 파일을 만들어야합니다.
createstore.js에 함수 만들기
import { createStore as reduxCreateStore, applyMiddleware, combineReducers } from "redux";
import logger from "redux-logger";
import { todoReducer } from "./reducers/todo";
export default function createStore() {
const store = reduxCreateStore(
combineReducers({
todo: todoReducer,
}),
applyMiddleware(
logger,
)
);
return store;
}
React에 Redux 적용
index.js를 변경합니다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import createStore from './createstore';
const store = createStore() ;
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
redux, createstore를 가져 와서 Provider에 store를 설정하면됩니다.
serviceWorker.unregister ()는 오프라인 캐시를 비활성화합니다.
이것은 create-react-app를 하면 표준으로 붙어 있습니다. 지금은 무시하고 OK입니다.
Component 정의
components/todo.js
todo 추가를위한 텍스트 상자와 버튼을 씁니다.
import React from 'react';
export default class Todo extends React.Component{
render(){
return(
<div>
<input type="text" />
<button>追加</button><br />
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
</div>
);
}
}
Action 정의
actions/todo.js
export const addTodo = (todo) => {
return {
type: 'ADD_TODO',
payload: { todo: todo }
};
}
Action은 Reducer에 지시를 내립니다.
type 프로퍼티를 반드시 가지고 있어 이것이 처리의 키가 됩니다.
payload property는 처리에 사용하는 파라미터로, 이 예에서는 추가하는 TODO를 가지게 하고 있습니다
Reducer 정의
reducer.todo.js
const initialState = {
todoList: []
}
export const todoReducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_TODO':
// 新しく追加するTODO
const todo = action.payload.todo;
// stateを複製して追加
const newState = Object.assign({}, state);
newState.todoList.push(todo);
return newState;
default:
return state;
}
};
state는 rewrite가 아닌 새로운 객체입니다.
단순히 인수의 state에 추가하는 대신,
Object.assign 메소드로 복제한 새로운 state 에 추가해,
그것을 반환 값으로 설정합니다.
Component 정의
components/todo.js
import { connect } from 'react-redux';
import * as actions from '../actions/todo';
import Todo from '../components/todo';
const mapStateToProps = state => {
return {
todo: state.todo,
}
}
const mapDispatchToProps = dispatch => {
return {
addTodo: (todo) => dispatch(actions.addTodo(todo)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Todo)
mapStateToProps 함수
사용할 상태를 잘라내어 props에서 참조할 수 있는 함수
mapDispatchToProps 함수
dispatch 하기 위한 함수를 props 에 매핑 하기 위한 함수
각각 정의한 것을 connect 함수로 컴퍼넌트에 접속해 export합니다. 이렇게 하면 컴포넌트가 redux에 의한 상태 관리를 의식하지 않고, state나 dispatch를 참조, 실행할 수 있게 됩니다.
컨테이너의 사용법은, 컴퍼넌트를 import 하고 있는 개소를 컨테이너로 전환할 뿐.
app.js
import React, { Component } from 'react';
import './App.css';
//import Todo from './components/todo';
import Todo from './containers/todo';
Component 재작성
components/todo.js
import React from 'react';
export default class Todo extends React.Component {
state = {
todo: ''
}
render() {
console.log(this.props);
// StoreのTodoからリストを生成
const list = this.props.todo.todoList.map((todo, index) => <li key={index}>{todo}</li>)
return (
<div>
<input type="text" onChange={elm => this.setState({ todo: elm.target.value })} />
<button onClick={() => this.props.addTodo(this.state.todo)}>追加</button><br />
<ul>
{list}
</ul>
</div>
);
}
}
중복 코드가 될수록 redux의 혜택이 커집니다.
변경 사항을 즉시 알 수 있으므로 팀 개발이 기존보다 간단합니다.
Reference
이 문제에 관하여(React&Redux 에센셜), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/moyuta/items/a0b79adcf8e53e914715
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<form>
<input type="text" id="hoge" />
<button onclick="push()">追加</button>
</form>
<ul id="list"></ul>
</html>
<script>
function push(){
let sentence = $("#hoge").val() ;
$("#list").append("<li>"+sentence+"</li>") ;
}
</script>
$ npm install -g create-react-app
$ create-react-app todo
$ cd todo
$ npm install --save redux react-redux redux-logger
import { createStore as reduxCreateStore, applyMiddleware, combineReducers } from "redux";
import logger from "redux-logger";
import { todoReducer } from "./reducers/todo";
export default function createStore() {
const store = reduxCreateStore(
combineReducers({
todo: todoReducer,
}),
applyMiddleware(
logger,
)
);
return store;
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import createStore from './createstore';
const store = createStore() ;
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
import React from 'react';
export default class Todo extends React.Component{
render(){
return(
<div>
<input type="text" />
<button>追加</button><br />
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
</div>
);
}
}
export const addTodo = (todo) => {
return {
type: 'ADD_TODO',
payload: { todo: todo }
};
}
const initialState = {
todoList: []
}
export const todoReducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_TODO':
// 新しく追加するTODO
const todo = action.payload.todo;
// stateを複製して追加
const newState = Object.assign({}, state);
newState.todoList.push(todo);
return newState;
default:
return state;
}
};
import { connect } from 'react-redux';
import * as actions from '../actions/todo';
import Todo from '../components/todo';
const mapStateToProps = state => {
return {
todo: state.todo,
}
}
const mapDispatchToProps = dispatch => {
return {
addTodo: (todo) => dispatch(actions.addTodo(todo)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Todo)
import React, { Component } from 'react';
import './App.css';
//import Todo from './components/todo';
import Todo from './containers/todo';
import React from 'react';
export default class Todo extends React.Component {
state = {
todo: ''
}
render() {
console.log(this.props);
// StoreのTodoからリストを生成
const list = this.props.todo.todoList.map((todo, index) => <li key={index}>{todo}</li>)
return (
<div>
<input type="text" onChange={elm => this.setState({ todo: elm.target.value })} />
<button onClick={() => this.props.addTodo(this.state.todo)}>追加</button><br />
<ul>
{list}
</ul>
</div>
);
}
}
Reference
이 문제에 관하여(React&Redux 에센셜), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/moyuta/items/a0b79adcf8e53e914715텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
