리액트 : 파이어베이스 데이터 저장 후 홈 화면 리랜더링하기

새 글을 추가시, 파이어베이스에 데이터는 저장되는데 홈 화면에서 새로고침을 해야 데이터가 보이는 상황

 

1) WriteNewFix.jsx 

- dispatch(add(newData));

새글 작성시 데이터 추가하는 부분에서 dispatch를 사용해서 리덕스로 상태값 변경요청

 

2) fixList.js

import {createSlice} from '@reduxjs/toolkit';

const initialState = [];

const listSlice = createSlice({

  name: 'fixList',

  initialState,

  reducers: {

    setList: (state, action) => {

      return action.payload;

    },

    addList: (state, action) => {

      state.unshift(action.payload);

    },

  },

});

export default listSlice.reducer;

export const {setList, addList} = listSlice.actions;

- addList 부분에서 unshift를 사용해서 데이터 앞 부분에 추가해주기.

 

3) HomePage.jsx

- const list = useSelector(state => state.testList);

메인화면에서 useSelector를 사용해서 list 변수에 상태값 가져와서 보여주기

 

 

 

*이 외에 수정사항

 <form onSubmit={formOnSubmit}>

기존에는 여기 return문 안에 form 태그에 바로 js 코드를 작성했었는데 

return문 위로 올리기! 습관을 잘 들여야겠음..!

 

 

끝.