react中使用redux,mobx

2019-09-09 20:06:54 阅读：246 来源： 互联网

标签：const list dispatch react mobx export redux data FRIEND

store.js

import { applyMiddleware, compose, createStore } from 'redux'
import rootReducer from '../reducers'

const middlewares = []

if (process.env.NODE_ENV === 'development') {
  const { logger } = require('redux-logger')
  middlewares.push(logger)
}

export const store = compose(applyMiddleware(...middlewares))(createStore)(rootReducer)

reducer index.js

import { combineReducers } from 'redux'
import title from './title'
import friend from './friend'
export default combineReducers({
  title,
  friend
  // friend,
  // post
})

friend.js

import { ADD_FRIEND, DEL_FRIEND } from '../actions/friend'

const initialState = {
  list: [
    {
      name: 'ryan', id: 1
    },
    {
      name: 'xiao', id: 2
    }
  ]
}

export default (state = initialState, action = {}) => {
  const { type, data } = action
  let list = state.list
  switch (type) {
    case ADD_FRIEND:
      list = state.list
      list.push(data)
      return Object.assign({}, state, { list: [...list] })
    case DEL_FRIEND:
      list = list.filter(item => item.id !== data)
      return Object.assign({}, state, { list: [...list] })
    default:
      return state
  }
}

title.js

import { UPDATE_TITLE } from '../actions/title'

const initialState = '点我！点我！点我！'

export default (state = initialState, action = {}) => {
  const { type, data } = action
  switch (type) {
    case UPDATE_TITLE:
      return data
    default:
      return state
  }
}

action friend.js

import { store } from '../store'

export const ADD_FRIEND = 'ADD_FRIEND'

export function addFriend (data) {
  const dispatch = store.dispatch
  // dispatch({ type: ADD_FRIEND, data })
  // request.post("/addFriend",{name}).then(res => {
  //   dispatch({ type: ADD_FRIEND, data })
  // })
  setTimeout(() => {
    dispatch({ type: ADD_FRIEND, data: { name: 'time-friend', id: 3 } })
  }, 200)
}

export const DEL_FRIEND = 'DEL_FRIEND'

export function delFriend (id) {
  const dispatch = store.dispatch
  dispatch({ type: DEL_FRIEND, data: id })
}

title.js

import { store } from '../store'

export const UPDATE_TITLE = 'UPDATE_TITLE'

export function updateTitle(data) {
  const dispatch = store.dispatch
  dispatch({ type: UPDATE_TITLE, data })
}

标签：const,list,dispatch,react,mobx,export,redux,data,FRIEND
来源： https://blog.csdn.net/qq_41831345/article/details/100672605

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react中使用redux,mobx