在子组件中导入动作和调度答案

【问题标题】：Import action and dispatch in child component在子组件中导入动作和调度
【发布时间】：2020-06-05 09:00:33
【问题描述】：

如何导入我的操作而不是在bookmarkVideo 中硬编码它，以便我可以在我的子组件中调度它？

容器：

    import {bookmarkVideo} from '../actions/videos';
    export default function VideoPlayerScreen(props) {

      const dispatch = useDispatch();
      ...
    // import action above instead
       const bookmarkVideo = id => {
        dispatch({
           type: 'BOOKMARK_VIDEO',
           payload: id
        });
        navigate('Video Player');
  };

  return (
    <>
          <VideoPlayerHeader
            {...videoProps}
            onClick={bookmarkVideo}
          />
            ...
            </View>

孩子：

    export default function VideoPlayerHeader(props) {
    let {title, bookMarked, icon, id, onClick} = props;

    let imageSource = images[icon].uri;
    return (
        <View style={styles.navBar}>
            ...
                <TouchableHighlight onPress={() => onClick(id)}>
                    {bookMarked ? (
                        <Image
                            style={{
                                width: 25,
                                height: 32,
                            }}
                            source={require('../assets/images/bookmark-filled.png')}
                        />
                    ) : (
                        <Image
                            style={{
                                width: 25,
                                height: 32,
                            }}
                            source={require('../assets/images/bookmark.png')}
                        />
                    )}
                </TouchableHighlight>
            </View>
        </View>
    );
}

视频.js：

export const bookmarkVideo = video => ({
    type: "BOOKMARK_VIDEO",
    video
});

减速机：

case "BOOKMARK_VIDEO":
  const newVideos = [];
  state.videos.map(item => {
    const { id, bookMarked } = item;
    const newBookmark = id == action.video ? !bookMarked : bookMarked;
    const newItem = {
      ...item,
      bookMarked: newBookmark
    };
    newVideos.push(newItem);
  });
  return { videos: newVideos, search: { term: "", videos: [] } };

商店：

import {createStore, applyMiddleware} from 'redux';
import {persistStore, persistReducer, autoRehydrate} from 'redux-persist';
import AsyncStorage from '@react-native-community/async-storage';
import thunk from 'redux-thunk';
import app from "../app.json";
import logger from 'redux-logger';
import rootReducer from '../reducers';

const persistConfig = {
    key: 'root',
    storage: AsyncStorage, // see "Merge Process" section for details.
    whitelist: [app.name],
    timeout: null,
};

const pReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(pReducer, applyMiddleware(thunk, logger));
export const persistor = persistStore(store);

export default store;

【问题讨论】：

你在使用thunk吗？
是的，请参阅更新后的问题

标签： reactjs react-native react-redux react-hooks

【解决方案1】：

我认为你可以在你的容器中使用这个功能：

const bookmarkVideoDispatcher = (id) => {
          const action = bookmarkVideo(id);
          dispatch(action);
}

然后像这样传递给onClick：

<VideoPlayerHeader
        {...videoProps}
        onClick={bookmarkVideoDispatcher}
/>

【讨论】：

【解决方案2】：

你需要分派两次，一次从 UI 到中间件，一次从中间件到 reducer - Redux Thunk - Why do I have to call dispatch() twice?

//UI dispatching
const dispatch = useDispatch();

...

onClick={()=>dispatch(bookmarkVideo())}

//towards reducer dispatch

const bookmarkVideo = id => dispatch => {
        dispatch({
           type: 'BOOKMARK_VIDEO',
           payload: id
        });
        navigate('Video Player');
  };

【讨论】：