17 .1리덕스 사용하여 리액트 어플리케이션 상태관리

리덕스의 정의: 리액트 상태관리 라이브러리, 여러 컴포넌트 거치지 않고 상태값 업데이트 가능(전역상태 관리시 효율적)

(context api와 비교 : context api를 사용하는 것보다 큰 규모의 프로젝트에서 사용

개발자도구, 미들웨어 기능을 제공하여 비동기 작업을 더 쉽게 할 수 있음.)

 

//1.액션
{
	type:"ADD_TODO",
    data :{
    	id:1,
        text:'리덕스배우기'
    }
}
{
	type:"CHANGE_INPUT",
    text:'안녕하세요'
}

//2,액션생성함수
function addTodo(data){
	return{
    	type:'ADD_TODO',
        data
    };
}
const changeinput = text = ({
	type:"CHANGE_INPUT",
    text
});
//3.초기화 시키기
const initialState={
counter:1
};
//4.리듀서함수정의
//reducer : 액션을 만들어서 발생시키면 리듀서가 현재상태와 전달받은 액션객체를 파라미터로 받아옴
function reducer(state=initailState,action){
	switch(action.type){
		case INCREMENT:
        	return{
            	counter:state.counter + 1
            };
        default:
        return state;
	}
}

//5.스토어만들기
/*프로젝트에 리덕스를 사용하기 위해  store를 구축, 한개의 프로젝트에는 하나의 스토어만 가질 수 있으며, 
스토어 안에는 몇가지 중요 내장 함수를 지님.*/
import {createStore} from 'redux'
(...)
const store = createStore(reducer);

//6.디스페치
/*스토어의 내장함수 중 하나로 이 함수가 호출되면 스토어라는 리듀서 함수를 실행시켜서 새로운 상태를 만듬*/