React - creating a stream - redux issue

JavaScript
1

Hi,

I’m following a course whereby a state should be rendered with the id of streams that have been created. However, when i launch the site and check redux dev tools, i see that my streams object is empty. can anyone help to see why?

image
image1366×768 86.3 KB

types.js



export const SIGN_IN = 'SIGN_IN';
export const SIGN_OUT = 'SIGN_OUT';
export const CREATE_STREAM = 'CREATE_STREAM';
export const FETCH_STREAMS = 'FETCH_STREAMS';
export const FETCH_STREAM = 'FETCH_STREAM';
export const DELETE_STREAM = 'DELETE_STREAMS';
export const EDIT_STREAM = 'EDIT_STREAM';

index.js (action)


import streams from '../apis/streams';
import {
  SIGN_IN,
  SIGN_OUT,
  CREATE_STREAM,
  FETCH_STREAMS,
  FETCH_STREAM,
  DELETE_STREAM,
  EDIT_STREAM
} from './types';
 
export const signIn = userId => {
  return {
    type: SIGN_IN,
    payload: userId
  };
};
 
export const signOut = () => {
  return {
    type: SIGN_OUT
  };
};
 
export const createStream = formValues => async dispatch => {
  const response = await streams.post('/streams', formValues);
 
  dispatch({ type: CREATE_STREAM, payload: response.data });
};
 
export const fetchStreams = () => async dispatch => {
  const response = await streams.get('./streams');
 
  dispatch({ type: FETCH_STREAMS, payload: 'response.data' });
};
 
export const fetchStream = id => async dispatch => {
  const response = await streams.get(`/streams/${id}`);
 
  dispatch({ type: FETCH_STREAM, payload: 'response.data' });
};
 
export const editStream = (id, formValues) => async dispatch => {
  const response = await streams.put(`/streams/${id}`, formValues);
 
  dispatch({ type: EDIT_STREAM, payload: 'response.data' });
};
 
export const deleteStream = id => async dispatch => {
  await streams.delete(`/streams/${id}`);
 
  dispatch({ type: DELETE_STREAM, payload: id });
};

streamreducer:


import _ from 'lodash';
import {
  CREATE_STREAM,
  FETCH_STREAMS,
  FETCH_STREAM,
  DELETE_STREAM,
  EDIT_STREAM
} from '../actions/types';
 
export default (state = {}, action) => {
  switch (action.type) {
    case FETCH_STREAMS:
      // eslint-disable-next-line no-undef
      return { ...state, ..._.mapKeys(action.payload, 'id') };
    case FETCH_STREAM:
      return { ...state, [action.payload.id]: action.payload };
    case CREATE_STREAM:
      return { ...state, [action.payload.id]: action.payload };
    case EDIT_STREAM:
      return { ...state, [action.payload.id]: action.payload };
    case DELETE_STREAM:
      return _.omit(state, action.payload);
    default:
      return state;
  }
};

index reducer


import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import authReducer from './authReducer';
import streamReducer from './streamReducer';
 
export default combineReducers({
  auth: authReducer,
  form: formReducer,
  streams: streamReducer
});

streamlist


import React from 'react';
import { connect } from 'react-redux';
import { fetchStreams } from '../../actions';
 
class StreamList extends React.Component {
  componentDidMount() {
    this.props.fetchStreams();
  }
 
  render() {
    return <div>StreamList</div>;
  }
}
 
export default connect(
  null,
  { fetchStreams }
  )(StreamList);
2

In index.js (action) file, there are a couple of naive mistakes.

// The following route should be '/streams' only. You have a extra dot in there.
const response = await streams.get('./streams');

In fetchStreams, fetchStream, and editStream the payload is response.data as a string not a variable/reference. Remove quotes around them.

1 Like
3

hi solved, thanks close