Question

如何导入我的操作而不是在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>
    );
}

Videos.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;

Answer 1

我认为您可以在容器中使用此功能：

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

然后将其传递给onClick：

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

Answer 2

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

new Date().toISOString();

//UI dispatching
const dispatch = useDispatch();

...

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

子组件中的导入动作和分派

2 个答案: