React Redux thunk 表单验证

Question

我正在使用 React 和 Redux thunk 来实现类似的异步功能。

//actions.js
export const fetchData = () => async(dispatch) => {
    dispatch({type:'FETCHING_DATA'})

    try {
        const response = await Axios.get("https://jsonplaceholder.typicode.com/posts");
        
        dispatch({type:'FETCH_DATA_SUCCESS', payload: response.data})

    } catch(error) {
        dispatch({type:'FETCH_DATA_FAILURE', error})
    }
}

//reducer.js

const initState = {
    items: [],
    loading: false,
    error: null
}

const dataReducer = (state=initState, action) => {
    switch (action.type) {
        case "FETCHING_DATA":
            return {
                ...state,
                loading: true,
                error: null
            }
        case "FETCH_DATA_SUCCESS":
            return {
                ...state,
                loading: false,
                items: action.payload
            }
        case "FETCH_DATA_FAILURE":
            return {
                ...state,
                loading: false,
                error: action.error
            }
        default:
            return state
    }
}

//RandomComponent.js

    const state = useSelector((state) => state)

    useEffect(()=> {
        dispatch(fetchPosts())
    }, [])

    const renderPosts = () => {
        if (state.loading) {
            return <h1>loading</h1>
        }

        return state.items.map(element => {
            return <h1>{element.title}</h1>
        })
    }

效果很好。但是现在有了表格，我有点卡住了。例如，当我在模态 window 中有表单时，所以我想等待响应。例如。创建记录。如果成功创建记录，关闭模态 window，但是当 API 端出现错误时，让模态 window 打开以进行其他处理。我认为它应该是这样的

const submitForm = async(data) => {
  await dispatch(createRecord(data));
  ...
  if(recordWasCreated){
     closeModal()
  }
}

而且我不知道如何进行。感谢您提供一些提示。

Answer 1

你能post codesandbox 或github 上的完整代码吗？一般来说，虽然不需要等待派送。您关闭模式的方式不正确。您的模式的可见性应由状态控制。例如。您可以在创建记录后在状态中设置一个标志，然后像下面这样使用它

<Modal show={!state.recordCreated}/>

React Redux thunk 表单验证

React Redux thunk form validation

reactjs

redux

redux-thunk

react-hook-form