Dva: ๊ฒฝ๋กœ์—์„œ ๋ชจ๋ธ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ง€์šฐ๋Š” ๋ฐฉ๋ฒ•

์— ๋งŒ๋“  2017๋…„ 09์›” 08์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: dvajs/dva

์ง€๊ธˆ ๋‰ด์Šค ํŽธ์ง‘์šฉ ํŽ˜์ด์ง€๋ฅผ ์“ฐ๋Š” ์ค‘์ธ๋ฐ ํŽธ์ง‘๊ณผ ์ƒ์„ฑ์˜ ๋กœ์ง์ด ๋˜‘๊ฐ™์•„์„œ ๊ฐ™์€ ํŽ˜์ด์ง€์— ์ผ๋Š”๋ฐ ๋ฌธ์ œ๋Š” ํŽธ์ง‘ ๋กœ์ง์— ๋“ค์–ด๊ฐ€๋„ ๋‰ด์Šค ์—๋””ํ„ฐ์˜ ๋ชจ๋ธ์ด ๊ทธ๋Œ€๋กœ ๋‚จ๋Š”๋‹ค. ๋ชจ๋ธ ๋ฐ์ดํ„ฐ์—์„œ ๋‹ค์Œ ๋ฒˆ์— ์ƒˆ ๋‰ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋…ผ๋ฆฌ๋กœ ์˜ฌ ๋•Œ ๋งˆ์ง€๋ง‰์œผ๋กœ ๋‰ด์Šค๋ฅผ ํŽธ์ง‘ํ–ˆ์„ ๋•Œ์˜ ์ž”์—ฌ ๋ชจ๋ธ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋“œํ•˜์—ฌ ํŽ˜์ด์ง€์— ์˜ํ–ฅ์„ ์ค๋‹ˆ๋‹ค. ์ด์ œ ๋ชจ๋ธ์„ ์ง€์šฐ๋Š” ๋ฐฉ๋ฒ•์€ ํšจ๊ณผ์—์„œ clearModel ๋ฉ”์„œ๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ ค๋ฉด ๋‹ค์Œ์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

*clearModel({ payload }, { put }) {
    yield put({
        type: 'clear',
    });
},

๋™์‹œ์— ๊ฐ์†๊ธฐ์—์„œ ์ƒˆ๋กœ์šด clear ๋ฉ”์„œ๋“œ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

clear() {
    return {};
},

๊ทธ๋Ÿฐ ๋‹ค์Œ ๊ตฌ์„ฑ ์š”์†Œ์˜ componentWillUnMount์— ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.

dispatch({
    type: 'model/clearModel',
    payload: {}
});

์ œ ๊ธ€์— ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ๊ฑด์ง€ ์—ฌ์ญค๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์“ฐ๊ธฐ์—๋Š” ์กฐ๊ธˆ ์ž˜๋ชป๋œ ๋Š๋‚Œ์ž…๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@sorrycc๊ฐ€ ๋ณด๋‚ธ ๋งํฌ๋Š” 404์ž…๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

@hanxiansen
๊ธฐ์กด์— ์จ๋ณธ ๋ฐฉ๋ฒ•์€ ๋ชจ๋ธ์˜ ๊ตฌ๋…์—์„œ history.listen((location)) ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ˜„์žฌ ์ž…๋ ฅ๋œ ๊ฒฝ๋กœ๋ฅผ ํŒ๋‹จํ•˜์—ฌ ๋‹ค๋ฅธ ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. , ์ƒ์„ฑ๋˜๋ฉด ํ˜„์žฌ ์ƒํƒœ์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ์ง€์›Œ์ง‘๋‹ˆ๋‹ค.(์ €๋งŒ์˜ ์—ฐ์Šต์ด ์ ์ ˆํ•œ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.) ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

..........
  state: {
    topicData: {},
    topicId: '',
  },

  subscriptions: {

    setup ({ dispatch, history }) {
      history.listen((location) => {
        const match = pathToRegexp('/topic/:id/edit').exec(location.pathname)
        if (match) {
          dispatch({
            type: 'getTopic',
            payload: { id: match[1] },
          })
        } else {
          dispatch({
            type: 'updateState',
            payload: { topicData: {}, topicId: '' },
          })
        }
      })
    },

  },

..........
  effects: {
    * getTopic ({ payload }, { call, put }) {
      const accesstoken = localStorage.getItem('accesstoken')
      let params = { accesstoken }
      params = Object.assign(params, payload)
      let data = yield call(getTopic, params)
      console.log(data)
      if (data.success) {
        data = { topicData: data.data, topicId: data.data.id }
        // yield put({
        //   type: 'setTopicId',
        //   payload: { topicId: payload.id },
        // })
        yield put({ type: 'updateState',
          payload: data,
        })
      }
    },
.......
},

  reducers: {
     ........
    updateState (state, { payload }) {
      return {
        ...state,
        ...payload,
      }
    },

  },

์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐ ์•„๋ฌด๋Ÿฐ ๋ฌธ์ œ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ƒํƒœ ๋ณ€๊ฒฝ์€ ๊ฐ์†๊ธฐ๋กœ ์ด๋™ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋‹จ, ํŽธ์ง‘ ๋ฐ ์‹ ๊ทœ ๋กœ์ง์ด ๋ชจ๋‹ฌ์ธ ๊ฒฝ์šฐ ๋ชจ๋ธ์— ๋ฐ์ดํ„ฐ๋ฅผ ๋„ฃ์„ ์ˆ˜ ์—†์œผ๋‹ˆ https://github.com/dvajs/dva/blob/master/packages/dva-example- ์˜ ์ฒ˜๋ฆฌ ๋ฐฉ๋ฒ•์„ ์ฐธ๊ณ ํ•˜์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

@sorrycc๊ฐ€ ๋ณด๋‚ธ ๋งํฌ๋Š” 404์ž…๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰