I started using redux and read the document for sending action data to the store. I tried doing it but nothing is happening.

What is supposed to happen is when they press PLAY on the screen BookViewScreen.js a bottom media panel should appear but it's not the case here. Nothing is happening when I try to send action data to the store.

App.js

...

const store = createStore(combineReducers(media), {}, applyMiddleware(reduxThunk));

...

function mapStateToProps1({ media }) {
  return { media };
}
const MediaBottomPanel = connect(mapStateToProps1)(bottomMediaPanel);

...   

export default class App extends React.Component {
   
...

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }

    return (
      <Provider store={store}>
        <Navigation theme="dark" />
      </Provider>
    );
  }
}

media.js reducer

  import { UPDATE_MEDIA } from '../actions/types';

const INITIAL_STATE = {
  mediaList: null,
  currentlyPlaying: null,
};

export default function (state = INITIAL_STATE, action) {
  switch (action.type) {
    case UPDATE_MEDIA:
      return action.media;
    default:
      return state;
  }
}

media.js action

import { UPDATE_MEDIA } from './types';



export const updateMedia = (media, callback) => dispatch => {
  
  dispatch({type: UPDATE_MEDIA, media: media});
  if(callback)
    callback();
};

BookViewScreen.js Where I try to send action data.

   ...

    import * as mediasActions from '../store/actions/media';
    import { useSelector } from 'react-redux';

   ...
    
    const BookViewScreen  = (props, navigation) => {
      
...

  
    
                <Button
                  onPress={() => {
                    isAudio(!audio)
                    mediasActions.updateMedia({
                      info: {
                        author,
                        title,
                        cover,
                      },
                      currentlyPlaying: audios[0],
                      mediaList: audios,
                    })
                  }
    >
              ...

Here is the full github project if you are interested: Audiod

CodePudding user response：

So here https://github.com/ownsupernoob2/audiod/blob/master/src/screens/BookViewScreen.js#L93 you're calling the action as if it was a normal function. But it doesn't work like that in redux. Try:

import { useDispatch } from 'react-redux'
const dispatch = useDispatch(); // in the body of the function component
dispatch(mediasActions.updateMedia(...)) // play button click handler

There's two ways to dispatch actions:

1. useDispatch hook for function components
2. mapDispatchToProps argument for the connect() API for function and class components