bodyno / react-starter-kit

Start your first React App. By using React, Redux, and React-Router.
https://github.com/bodyno/react-starter-kit
Other
1.75k stars 392 forks source link

请教一下,关于redux的使用的小问题 #41

Open zidoshare opened 7 years ago

zidoshare commented 7 years ago

我一直对redux的理解不够,请教一个很菜的问题,一直苦于没人帮助。 开始一直按照你这样的封层封装,没有什么问题,但是我现在有这样的需求: 同一个路由下面,有两个需要结合redux的组件, image

我想把Tools组件放在CardManagement下面,怎么做?我按照实例那样,已经把Tools的reducer这些封装好了,我直接引入的container到CardManagement组件下面 image

使用 <Tools/>这样的格式放在组件里面,reducer并不能用,该怎么做呢?需要injectReducer吗?那样的话,怎么传store?作为参数?,还是说这样的做法根本就不对?想错了?

zidoshare commented 7 years ago

我这样做,只能拿到actions,拿不到state映射过来的属性,不知道在哪里拿。。。

bodyno commented 7 years ago

贴上我的部分代码,看了你应该就懂了 core/reducer.js

import { combineReducers } from 'redux'
import { routerReducer as router } from 'react-router-redux'
import core from 'reducer/core'
import code from 'components/SendCode/modules/sendCode'
import address from 'components/Address/modules/address'

export const reducers = (asyncReducers) => {
  return combineReducers({
    code,
    core,
    address,
    router,
    ...asyncReducers
  })
}

export const injectReducer = (store, { key, reducer }) => {
  if (Object.hasOwnProperty.call(store.asyncReducers, key)) return
  store.asyncReducers[key] = reducer
  store.replaceReducer(reducers(store.asyncReducers))
}

export default reducers

container.js

import {connect} from 'react-redux'
import {logout} from 'reducer/core'
import {dataChange, upload, uploadMulti, deleteStoreImage, checkDomain, submit, lookImg} from '../modules/apply'
import {codeDataChange, sendCode} from 'components/SendCode/modules/sendCode'
import {putCurAddress} from 'components/Address/modules/address'
import ApplyView from '../components/Apply'

const mapActionCreators = {
  logout,
  dataChange,
  upload,
  uploadMulti,
  deleteStoreImage,
  checkDomain,
  submit,
  lookImg,
  codeDataChange,
  sendCode,
  putCurAddress
}

const mapStateToProps = (state) => ({
  apply: state.apply,
  address: state.address,
  core: state.core,
  code: state.code
})

export default connect(mapStateToProps, mapActionCreators)(ApplyView)
zidoshare commented 7 years ago

哦哦,好像有点懂了,我理解实在是有点不足