React - Redux 수정

React Redux에서 store의 값을 수정하기위해 createSlice함수 속 reducers 속성이 필요하다.

reducers 속성이란 현재 상태와 액션(action)을 인수로 사용하여 새로운 상태 결과를 반환한다.

 

let user = createSlice({
    name : 'user',
    initialState: 'zelord',

    reducers: {
        changeName(state) {	// state는 값을 가리킨다. (zelord)
            return 'Kim zelord'	// return으로 값을 전달한다.
        }
    }
});

// 다른 컴포넌트가 사용할 수 있도록 export 한다.
export let { changeName } = user.actions;

// 변경을위한 함수를 실행하기위해 useDispach() 함수를 사용해야한다
let dispatch = useDispatch();

{
    item.map((data, id) => {
        console.log(user.user);
        return(
            <tr key={id}>
                <td>{id}</td>
                <td>{data.name}</td>
                <td>{data.count}</td>
                <td><button onClick={() => {
                
                    // dispatch함수를 사용하여 changeName 함수를 호출한다.
                    dispatch(changeName());
                    console.log(user.user);
                }}>+</button></td>
            </tr>
        )
    })
}

 

useDispatch란 store의 내장 함수이며 reducer에게 인자속 함수(action)를 호출하는 함수이다.

 

 

버튼을 클릭하면 이름이 바뀐것을 볼 수 있다.

 

 

 

반응형

 

 

 

문자열이나 숫자가 아닌 배열이나 오브젝트의 변경은 조금 다르다.

let user = createSlice({
    name : 'user',
    
    // 오브젝트로 된 데이터
    initialState: {name: 'zelord', age: 19 },
    reducers: {
        changeName(state) {
        	// state속 속성을 불러와 변경한다.
            state.name = 'K'
        },
        changeAge(state, action) {
        	// dispatch 함수속 인자값을 보내면 
            // action파라미터를 받아 변경할 수 있다.
            // action으로 받아올 때 .payload를 붙여야 한다.
            state.age += action.payload;
        }
    }
});

// 함수 속 값을 넣어 함수를 호출한다.
dispatch(changeAge(10));

store 에서 파라미터로 전달받을 때 action에서 payload를 붙여 값을 가져온다.

 

 

출력은 이러하다.