마카로닉스

2037 No

React(Nextjs) 따라하며 배우는 리액트 A-Z - 10. 리덕스 -1

2023-02-15 09:51:21 By 라이트 0 545 댓글수 4 포스트 하기

5월 2024
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

따라하며 배우는 리액트 A-Z

[프론트엔드, 웹 개발] 강의입니다.

이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.

✍️
이런 걸
배워요!

리액트

NextJS

타입스크립트

정적 사이트 자동 배포

도커

강의: https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8#

강의 자료 : https://github.com/braverokmc79/DiagramPDF

소스 :

https://github.com/braverokmc79/react-count-app

[10]. 리덕스

94. 리덕스란?

강의:

https://www.inflearn.com/course/따라하는-리액트/unit/119943?tab=curriculum

95. 미들웨어 없이 리덕스 카운터 앱 만들기

강의:

https://www.inflearn.com/course/따라하는-리액트/unit/119944?tab=curriculum

$ npx create-react-app ./ --template typescript

npm install redux --save

src/reducers/index.tsx

const cunter =(state =0 , action:{type:string} )=>{
  
    switch(action.type){
        case "INCREMENT":
            return state+1;
        case "DECREMENT":
            return state-1;
        default:
            return state;
           
    }
};


export default cunter;

App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';

type Props={
  value:number;
  onIncrement: ()=>void;
  onDecrement: ()=>void;
}

function App({ value,onIncrement, onDecrement } :Props) {
  return (
    <div className="App">
        Clicked : {value} times

        <button onClick={onIncrement}>
          +
        </button>

        <button onClick={onDecrement}>
          -
        </button>

    </div>
  );
}

export default App;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {legacy_createStore as createStore } from 'redux';
import counter from './reducers';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const store =createStore(counter);


const render = ()=>root.render(
  <React.StrictMode>
    <App  value={store.getState()} 
        onIncrement={()=> store.dispatch({type:"INCREMENT"})}
        onDecrement={()=> store.dispatch({type:"DECREMENT"})}
    />
  </React.StrictMode>
);

render();

store.subscribe(render);


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

96. combineReducers

강의:

https://www.inflearn.com/course/따라하는-리액트/unit/119945?tab=curriculum

src/reducer/index.tsx

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

const rootReducers = combineReducers({
    counter,
    todos
})

export default rootReducers

src/reducer/counter.tsx

const counter =(state =0 , action:{type:string} )=>{
  
    switch(action.type){
        case "INCREMENT":
            return state+1;
        case "DECREMENT":
            return state-1;
        default:
            return state;
           
    }
};


export default counter;

src/reducer/todos.tsx

enum ActionType{
    ADD_TODO = "ADD_TODO",
    DELETE_TODO ="DELETE_TODO"
}

interface Action {
    type:ActionType;
    text:string;
}

const todos = (state = [] , action :Action) => {
    switch(action.type){
        case 'ADD_TODO':
            return [...state, action.text] ;
        default :
            return state
    }
    
}

export default todos

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {legacy_createStore as createStore } from 'redux';
import rootReducers from './reducers';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const store =createStore(rootReducers);

store.dispatch({
  type:"ADD_TODO",
  text:"USE REDUX"
})
console.log('store.getState' ,  store.getState());

const render = ()=>root.render(
  <React.StrictMode>
    <App  
    
    value={store.getState()} 
        onIncrement={()=> store.dispatch({type:"INCREMENT"})}
        onDecrement={()=> store.dispatch({type:"DECREMENT"})}
    />
  </React.StrictMode>
);

render();

store.subscribe(render);


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

96. Redux Provider

강의:

https://www.inflearn.com/course/따라하는-리액트/unit/119946?tab=curriculum

설치 :

npm  i react-redux

index.tsx

const render = ()=>root.render(
  <React.StrictMode>
  <Provider  store={store}>
        <App  
            onIncrement={()=> store.dispatch({type:"INCREMENT"})}
            onDecrement={()=> store.dispatch({type:"DECREMENT"})}
        />
    </Provider>
  </React.StrictMode>
);

App.tsx

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

type Props={
  onIncrement: ()=>void;
  onDecrement: ()=>void;
}

function App({ onIncrement, onDecrement } :Props) {
  const [todoValue, setTodoValue] =useState("");

  const handleChange=(e : React.ChangeEvent<HTMLInputElement>)=>{
    setTodoValue(e.target.value);
  }

  const addTodo =(e: React.FormEvent<HTMLFormElement>)=>{
    e.preventDefault();
    setTodoValue("");
  }

  return (
    <div className="App">
        {/* Clicked : {value} times */}

        <button onClick={onIncrement}>
          +
        </button>

        <button onClick={onDecrement}>
          -
        </button>

      <form onSubmit={addTodo}>
          <input type='text' value={todoValue} onChange={handleChange} />
          <input type="submit" />
      </form>
    </div>
  );
}

export default App;

96. useSelector & useDispatch

강의:

https://www.inflearn.com/course/따라하는-리액트/unit/119947?tab=curriculum

App.tsx

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { useSelector } from 'react-redux/es/exports';
import { RootState } from './reducers';
import { useDispatch } from 'react-redux/es/hooks/useDispatch';

type Props={
  onIncrement: ()=>void;
  onDecrement: ()=>void;
}

function App({ onIncrement, onDecrement } :Props) {
  const dispatch =useDispatch();
  const counter =useSelector((state : RootState)=>state.counter);
  const todos : string[] =useSelector((state : RootState)=>state.todos);

  const [todoValue, setTodoValue] =useState("");

  const handleChange=(e : React.ChangeEvent<HTMLInputElement>)=>{
    setTodoValue(e.target.value);
  }

  const addTodo =(e: React.FormEvent<HTMLFormElement>)=>{
    e.preventDefault();
    dispatch({
      type:"ADD_TODO",
      text:todoValue
    });
    setTodoValue("");
  }

  return (
    <div className="App">
         Clicked : {counter} times 

        <button onClick={onIncrement}>
          +
        </button>

        <button onClick={onDecrement}>
          -
        </button>
       <ul>
          {todos.map((todo, index)=><li key={index}>{todo}</li>)}
       </ul>
      <form onSubmit={addTodo}>
          <input type='text' value={todoValue} onChange={handleChange} />
          <input type="submit" />
      </form>
    </div>
  );
}

export default App;

src/reducers/index.tsx

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

const rootReducers = combineReducers({
    counter,
    todos
})

export default rootReducers;

export type RootState = ReturnType<typeof rootReducers>;