redux로 alert창 닫기 질문입니다.

[강병민]

index.js

 

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore, combineReducers } from 'redux'

// 닫기버튼 만들기
let initAlert = true

function reducer2(state = initAlert, action) {
  if (action.type === 'closeAlert') {
    state = false
    return state
  } else {
    return state
  }
}

// redux state
let initVal = [
  { id: 0, name: '멋진신발', quan: 0 },
  { id: 1, name: '멋진신발1', quan: 1 },
  { id: 2, name: '멋진신발2', quan: 2 },
]

function reducer(state = initVal, action) {
  //
  if (action.type === 'incQuan') {
 

    let copy = [...state]
    copy[0].quan++
    return copy
  } else if ((action.type = 'decQuan')) {
    let copy = [...state]
    copy[0].quan--
    return copy
  } else {
    return state
  }
}

let store = createStore(combineReducers({ reducer, reducer2 }))

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

reportWebVitals()

/////////////////////////////////////////////////////////////////////////////

Cart.js

import React from 'react'
import { Table, Button } from 'react-bootstrap'
import { propTypes } from 'react-bootstrap/esm/Image'
import { connect } from 'react-redux'
import './App.css'
import './Detail.scss'

function Cart(props) {
  return (
    <div>
      <Table responsive>
        <tr>
          <th>상품id</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>

       
        {props.state.map((a, i) => {
         
          return (
            <tr key={i}>
              <td>{a.id}</td>
              <td>{a.name}</td>
              <td>{a.quan}</td>
              <td>
                <button
                  onClick={() => {
                   
                    props.dispatch({ type: 'incQuan' })
                  }}
                >
                  +{' '}
                </button>
                <button
                  onClick={() => {
                    props.dispatch({ type: 'decQuan' })
                  }}
                >
                  {' '}
                  -{' '}
                </button>
              </td>
            </tr>
          )
        })}
      </Table>
      {props.alertOpen === true ? (
        <div className="my-alert-yellow">
          <p>지금 구매하시면 신규할인 20%</p>
          <button
            onClick={() => {
              props.dispatch({ type: 'closeAlert' })

              console.log(props.alertOpen)
            }}
          >
            닫기
          </button>
        </div>
      ) : null}
    </div>
  )
}

function stateToProps(state) {

  return {
    state: state.reducer,
    alertOpen: state.reducer2,
  }
}

export default connect(stateToProps)(Cart)

//export default Cart;

 

질문 : 

닫기 버튼을 누르면 모달창이 안닫히고 수량이 -1이 됩니다.

그리고 props.alertOpen을 출력하면  계속 true가 뜹니다.

[codingapple]

알수없군요 reducer2안에서 console.log로 action같은걸 출력해봅시다 

아니면 뒷 강의에 나오는 useDispatch 이걸 써봅시다

[글쓴이]

글