ts-react 에서 redux react-redux 설치하고 에러뜨네요.

[조승엽]

저 두개 설치하고 
import { Provider } from 'react-redux'; 
import { createStore } from 'redux'; 
interface Counter { count : number } 
const 초기값 :Counter = { count: 0 }; 
function reducer(state = 초기값, action :any) {
 if (action.type === '증가') { 
return { count : state.count + 1 } 
} else if (action.type === '감소'){ 
return { count : state.count - 1 } 
} else { return initialState } 
} 
const store = createStore(reducer); 
// store의 타입 미리 export 해두기 
 export type RootState = ReturnType<typeof store.getState>
ReactDOM.render( 
<React.StrictMode> 
<Provider store={store}>
 <App /> 
</Provider> 
</React.StrictMode>, 
document.getElementById('root')
 ) 

이 내용 복붙했을때 import 한것중 createStore 이부분에 줄이 그어져있고요,
initialState 빨간줄로 이름을 찾을수 없다고 나오며,
reactDom.render에서 render에 빨간줄로 typeof import(설치된주소/react-dom/client) 형식에 'render' 속성이 없습니다,
라고 나오네요. 

[codingapple]

최근 전부 리액트 18버전으로 설치되어서 그런듯요
리덕스도 redux toolkit 신버전으로 설치해서 신버전 문법쓰면 별문제 없습니다

[조승엽]

지우고 다시 깔고 index.tsx에 입력도 했는데 전과 같이 나오네요.
nodejs가 16.13.2인데 이거 다시깔고 프로젝트도 리셋해봐야 할까요?

일단은 package.json이랑 index.tsx다시 올려볼께요.

//////////////////////////// package.json
{
  "name": "reactts",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.3",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.47",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

////////////////////////////////////////////////////////////////// index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { Provider } from 'react-redux';
import { createStore } from 'redux';

interface Counter {
  count : number
}

const 초기값 :Counter  = { count: 0 };

function reducer(state = 초기값, action :any) {
  if (action.type === '증가') {
    return { count : state.count + 1 }
  } else if (action.type === '감소'){
    return { count : state.count - 1 }
  } else {
    return initialState
  }
}

const store = createStore(reducer);

// store의 타입 미리 export 해두기
export type RootState = ReturnType<typeof store.getState>

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)  

[codingapple]

createStore 는 예전문법이라 redux toolkit 문법으로 바꾸면 됩니다 https://redux-toolkit.js.org/tutorials/quick-start

[조승엽]

이번엔 npm install @reduxjs/toolkit react-redux 로 설치했었어요.

[글쓴이]

글