React Reducer вызывается, но не меняет состояние - PullRequest
Новая
       5

React Reducer вызывается, но не меняет состояние

1 голос
/ 12 июля 2020

Я проверяю, вызываются ли и действие, и редуктор. Их обоих вызывают, но mapstatetoprops не меняет состояние. Также означает, что action.tpye получает изменения. Я не понимаю, почему это не работает, и любая помощь приветствуется.

Это мой редуктор 

const calling = (state={}, action) => {
  switch (action.type) {
    case 'CALLING_USER':
      return {type: action.type, callLoading: true, isCalling: true, friend: action.friendSocket}
    case 'ANSWERING_CALL':
      console.log("ANSWER CALL")
      return {type: action.type, callLoading: true, isCalling: true, friend: action.data.socket, offer: action.data.offer}
    case 'CALL_SUCCESS':
      return {
        isCalling: true,
        callLoading: false
      }
    case 'CALL_ERROR':
      return {
        callLoading: false,
        error: true,
        callErrorText: action.err,
      }
    default:
      return {isCalling: false}
  }
}

export default calling

Action 

export const CALLING_USER = 'CALLING_USER'
function callingUser(friendSocket) {
  return {
    type: CALLING_USER,
    friendSocket
  }
}

export const ANSWERING_CALL = 'ANSWERING_CALL'
function answeringCall(data) {
  return {
    type: ANSWERING_CALL,
    data
  }
}
export const CALL_ERROR = 'CALL_ERROR'
function callError(err) {
  return {
    type: CALL_ERROR,
    err
  }
}

export function callSetup(friendSocket, dispatch) {
  console.log("IS THIS WORKING")
  console.log(dispatch)
  return function(dispatch) {
    console.log(dispatch)
    dispatch(callingUser(friendSocket))
  }
}

export function answerSetup(data) {
  console.log("ANSWER SETUP")
  return function(dispatch) {
    dispatch(answeringCall(data))
  }
}

Он вызывается здесь 

import { answerSetup } from './Redux/Actions'
import store from './Redux/store'
import io from "socket.io-client";

export const startGlobalSockets = (mySocket) => {
  mySocket.on("gettingCalled", data => {
    console.log("GETTING CALLED SOCKET", data)
    store.dispatch(answerSetup(data))
  })
}
export default startGlobalSockets

Это должно сделать это утверждение верным. 

const mapStateToProps = (state) => ({
  user: state.session.user,
  calling: state.calling
})

const isVideo = (this.props.calling.isCalling ?
    <Grid style={{width:"100%", height: "100%"}} item sm={10}>
          <VideoScreen/>
    </Grid> :
    <Grid style={{height: '57em', overflow: 'auto'}} item sm={10}>
      <div className="parent">
          <Post/>
      </div>
    </Grid>)
...
export default withRouter(connect(mapStateToProps)(Home))

Ответы [ 2 ]

0 голосов
/ 12 июля 2020

В вашем примере answerSetup возвращает функцию, которая внутренне вызывает answeringCall вместо объекта с типом действия и полезной нагрузкой (например, answeringCall). Если у вас нет промежуточного программного обеспечения, такого как react-thunk, которое обрабатывает функции, и у вас там нет специального logi c, я не понимаю, почему бы не использовать answeringCall непосредственно в вызывающем компоненте.

0 голосов
/ 12 июля 2020

Я полагаю, вы не использовали connect как требуется. Вы импортируете его, но я не вижу, где вы его используете. Было бы полезно, если бы вы разместили весь фрагмент кода, включая использование connect, mapStateToProps и mapDispatchToProps.

...