Redux:无法将操作数据发送到存储

Question

我开始使用redux并读取文档，以便将操作数据发送到存储。我试过了，但是什么也没发生。

应该发生的是当他们按下PLAYBookViewScreen.js底部媒体面板应该出现，但这里不是这样。当我尝试将操作数据发送到存储时，什么也没有发生。

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减速机

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行动

import { UPDATE_MEDIA } from './types';

export const updateMedia = (media, callback) => dispatch => {

dispatch({type: UPDATE_MEDIA, media: media});
if(callback)
callback();
};

BookViewScreen.js我尝试发送动作数据。

...
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,
})
}
>
...

如果你感兴趣，这里是完整的github项目:Audiod

Answer 1

所以这里https://github.com/ownsupernoob2/audiod/blob/master/src/screens/BookViewScreen.js#L93你调用的动作就好像它是一个普通的函数。但在redux中不是这样的。试一试:

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

有两种方法可以分派动作:

1. useDispatch功能组件钩子
2. mapDispatchToProps参数，connect()API用于函数和类组件