Redux：无法将操作数据发送到商店

Question

我开始使用 redux 并阅读了将动作数据发送到商店的文档。我尝试这样做但没有任何反应。

应该发生的是当他们在屏幕上按 PLAY BookViewScreen.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

有两种调度操作的方法：

useDispatch 函数组件挂钩
mapDispatchToProps connect() API 函数和 class 组件的参数

Redux：无法将操作数据发送到商店

Redux: Unable to send action Data to a Store

react-native

redux

react-redux