redux관련 state변경이 안되는 문제

[정법진]

안녕하세요.
현재 쇼핑몰 프로젝트 18번째 강의까지 들었는데요.

store.js 파일에 state를 보관하고 쓰는 것까진 잘 되는데
변경하는 부분이 안 됩니다.

+버튼을 클릭했을때 state변경함수가 실행되면서
변경된 내용이 적용되어야 하는데
아무런 반응이 없습니다.
(state.user의 데이터가 john kim으로 바뀌어야 하는데 변화가 없습니다.)

redux문법을 이용하여 state데이터를 가져오고
적용하는 소스는 아래와 같이 작성하였습니다.

===========================================
store.js
---------------------------------------------------------
import { configureStore, createSlice } from '@reduxjs/toolkit'

// user state 생성
let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : {
    changeName(state){
      return 'john' + state;
    }
  }
})

// goods state 생성
let goods = createSlice({
  name : 'goods',
  initialState : [
                    {id : 0, name : 'White and Black', count : 2},
                    {id : 2, name : 'Grey Yordan', count : 1}
                 ]
})

// user state 등록
export default configureStore({
  reducer: { 
    user : user.reducer,
    goods : goods.reducer
  }
})

// user 변경 state함수 등록 
export let {changeName} = user.actions;
===========================================


===========================================
Cart.jsx
---------------------------------------------------------

import { Table }  from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';
import { changeName } from './../store.js';

function Cart(){
    let state = useSelector( (state) => {return state} )
    // store.js에게 데이터를 요청하는 함수
    let dispatch = useDispatch();

    return(
        <div>
            { state.user }의 장바구니
            <Table>
                <thead>
                    <tr>
                    <th>#</th>
                    <th>상품명</th>
                    <th>수량</th>
                    <th>변경하기</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        state.goods.map( (a, i)=>
                            <tr>
                                <td>{state.goods[i].id}</td>
                                <td>{state.goods[i].name}</td>
                                <td>{state.goods[i].count}</td>
                                <td>
                                    <button onClick={                                        
                                        ()=>{ dispatch(changeName); }
                                    }>+</button>
                                </td>
                            </tr>
                        )
                    }
                </tbody>
            </Table>
         </div>
    )
}

export default Cart;
===========================================

• 이 게시글은 정법진에 의해 2 주, 3 일 전에 수정됐습니다.
• 이 게시글은 정법진에 의해 2 주, 3 일 전에 수정됐습니다.
• 이 게시글은 정법진에 의해 2 주, 3 일 전에 수정됐습니다.

[codingapple]

dispatch(changeName('어쩌구')) 라고 써봅시다

[정법진]

네. 말씀하신대로 수정하니 잘 되네요.

export와 import는 변수로 처리하는 구조였는데,
함수를 사용할 때는
함수의 인자값을 함수로 받아오는 특이한 구조였군요.

• 이 답변은 정법진에 의해 2 주, 2 일 전에 수정됐습니다.

[글쓴이]

글