关于redux和react-redux使用combinereducers之后的问题

Z时代
2024-01-10
分类：综合

react

最近用react写项目的时候，开始复习之前学过的redux，记录一下一些坑，以防忘记

我现在的redux目录下有这么些东西

首先是index.js

import { createStore } from \'redux\'
import player from \'./player_reducer\'
let store = createStore(player)
export default store

然后是player.js

import { PLAY_LOCALMUSIC,CAN_CHANGE_PLAY_STATUS,CANNT_CHANGE_PLAY_STATUS,OPEN_PLAY_DETAIL,PLAY_STATUS } from \'./actionType\'
const defaultState = {
    playlocalIndex:0,
    playtype:1,
    canchangeplaystatus:false,
    open_play_detail:false,
    play_status:false,
    playingdata:{}
}
export default function player(state = defaultState, action) {
    //函数体
    return state
}

　然后是封装的actioncreater和actiontype

export const PLAY_LOCALMUSIC = \'play_localmusic\'
export const CAN_CHANGE_PLAY_STATUS = \'can_change_play_status\'

import { PLAY_LOCALMUSIC,CAN_CHANGE_PLAY_STATUS,CANNT_CHANGE_PLAY_STATUS,OPEN_PLAY_DETAIL,PLAY_STATUS } from "./actionType";
export const play_localmusic = (index,play_type) => ({
    type:PLAY_LOCALMUSIC,
    index:index,
    play_type:play_type
})
export const canchangeplaystatus = () => ({
    type:CAN_CHANGE_PLAY_STATUS,
})

　　现在一切正常，当更改store触发函数后打印此时的sotre.getState(),得到的结果是这样的

import { createStore } from \'redux\'
import neteasecloudmusic  from \'./app\'
let store = createStore(neteasecloudmusic)
export default store

现在由于项目变复杂需要多个reducer共通管理store，则使用了combinereducers，更改如下，新建app.js

import { combineReducers } from \'redux\';
import player from \'./player_reducer\';
const neteasecloudmusic = combineReducers({
    player
})
export default neteasecloudmusic;

　　修改index.js

import { createStore } from \'redux\'
import neteasecloudmusic  from \'./app\'
let store = createStore(neteasecloudmusic)
export default store

　　player.js保持不动，由于我到这个时候没有使用connect，直接使用store.getState()进行的渲染，所以这时候关于redux的所有功能都会失效，原因在于这个时候再次打印store.getState()

这个时候的state变成了一个对象（之前也是一个对象），只不过现在被分割出来了

然后就是connect的用法，在组件页面引入connect

import { connect } from \'react-redux\'

　　然后组件的export做一点改动

const mapstatetoprops = (state) => {
    return{
        canchangeplaystatus:state.player.canchangeplaystatus,
        playtype:state.player.playtype,
        playlocalIndex:state.player.playlocalIndex,
    }
  }
  const mapdistoprops = (dispatch) => {
    return{
      open_play_detail  (data)  {
            console.log(\'为什么啊\')
            const action = openplaydetail(true,data)
            dispatch(action)
      }
    }
  }
export default connect(mapstatetoprops,mapdistoprops)(Player)

　　通过connect，将store的数据以及dispatch方法绑定在了组件的props上，可以直接通过this.props访问到store里的数据，不用使用store.getState()，而且props会根据变化渲染页面

同时如果使用了中间件，比如thunk

import { createStore, applyMiddleware } from \'redux\'
import neteasecloudmusic  from \'./app\'
import thunk from \'redux-thunk\'
let store = createStore(neteasecloudmusic,applyMiddleware(thunk))
export default store

　　之前的action是这样（举个例子）

export const openplaydetail = (Bool,musicdata) => ({
    type:OPEN_PLAY_DETAIL,
    playdetail_status:Bool,
    playing_data:musicdata
})

　　那么此时action就可以是一个函数，而不再仅仅是对象，此时的action可以这样写，例如

export const openplaydetail = (Bool,musicdata) => {
    return (dispatch) => {
        dispatch({
            type:OPEN_PLAY_DETAIL,
            playdetail_status:Bool,
            playing_data:musicdata
        })
    }
}

　　在return里面可以执行一些操作，例如异步请求等等。而且这个时候可以不止进行一个dispatch，可以进行多个dispatch

export const openplaydetail = (Bool,musicdata) => {
    return (dispatch) => {
        dispatch({
            type:OPEN_PLAY_DETAIL,
            playdetail_status:Bool,
            playing_data:musicdata
        })
        dispatch({
            type:OPEN_USER_DETAIL,
            open_user_detail:false
        })
    }
}