[Redux] MY DICTIONARY(내 사전) 만들기

 

- 테스트 영상 -

 

 

 

 

Redux >modules> Card.js

• initialState  => state 초기값 생성  
• Action Creators => Create 
• Reducer=> new_card_list에 state값 추가  

// card.js

// ---- Actions ----
const CREATE = "card/CREATE";

//---- 초기값 -----
const initialState = {
  card: [
    {
      word: "Lorem",
      explanation: "Ipsum is simply dummy ",
      example: "It is a long established fact that a reader ",
    },
    {
      word: "Lorem",
      explanation: "Ipsum is simply dummy ",
      example: "It is a long established fact that a reader ",
    },
  ],
};

// ----- Action Creators ----
export function createCard(card) {
  console.log("액션을 생성할거야!");
  return { type: CREATE, card };
}

// ---- Reducer -----
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case "card/CREATE": {
      console.log("이제 값을 바꿀거야!");
      let new_card_list = [...state.card, action.card];
      return { card: new_card_list };
    }

    default:
      return state;
  }
}

 

Redux > configStore.js

• rootReducer => 리듀서 묶어주기(현재 1개지만 ,  추가 가능 )
• createStore => 묶어준 리쥬서  Store 만들기  

import { createStore, combineReducers } from "redux";
import card from "./modules/Card";

//리듀서 묶기
const rootReducer = combineReducers({ card });

//스토어 생성
const store = createStore(rootReducer);

export default store;

 

index.js

 

• Provider => index.js에 store 연결 , 자식 컴포넌트가 데이터 참조 

import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./redux/configStore";

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")

 

component > AddPage.js

• input => useRef() 입력값 가져오기 
• onClick() => dispatch(액션 객체 넣어주기)

import React from "react";
import styled from "styled-components";
import { useHistory } from "react-router";
import { Dispatch } from "react";
import { useDispatch } from "react-redux";
import { createCard } from "../redux/modules/Card";

const AddPage = () => {
  const history = useHistory();
  const word = React.useRef();
  const explanation = React.useRef();
  const example = React.useRef();
  const dispatch = useDispatch();

  // 추가하기
  const addCardList = () => {
    //액션객체 넣어주기
    dispatch(
      createCard({
        word: word.current.value,
        explanation: explanation.current.value,
        example: example.current.value,
      })
    );
    history.goBack();
  };
  return (
    <div>
      <h1 style={{ color: "#333" }}>Add word card</h1>
      <Card>
        <span>단어</span>
        <input type="text" placeholder="단어를 입력하세요." ref={word}></input>
      </Card>
      <Card>
        <span>설명</span>
        <input
          type="text"
          placeholder="설명을 입력하세요."
          ref={explanation}
        ></input>
      </Card>
      <Card>
        <span>예시</span>
        <input
          type="text"
          placeholder="예시를 입력하세요."
          ref={example}
        ></input>
      </Card>
      <Button onClick={addCardList}>추가하기</Button>
    </div>
  );
};

 

 

---

보완해야 할 점 

input값에 데이터가 없을 시 추가 버튼 클릭하면 빈 card 추가가 된다 

리덕스에서 액션이 될때 액션 값이 없을 시 초기값 state 넘겨주는 법을 생각해봐야겠다.