Redux-Toolkit и React Hooks - изменение магазина не вызывает повторную визуализацию - PullRequest
Новая
       26

Redux-Toolkit и React Hooks - изменение магазина не вызывает повторную визуализацию

1 голос
/ 01 апреля 2020

Я пытаюсь предварительно заполнить форму информацией из базы данных всякий раз, когда URL-адрес содержит параметр запроса с идентификатором. Я не могу заставить сайт вызвать повторную визуализацию, когда информация извлекается из базы данных. Соответствующий код в компоненте показан ниже. 

let { id } = useParams();

const { title, summary, severity, references, type, vulnerabilities } = useSelector(
        (state: RootState) => state.articles.article
)

useEffect(() => {
    if(id) dispatch(fetchArticle(id))
}, [])

const [form, setForm] = useState<FormState>({
    title: title,
    type: type,
    summary: summary,
    severity: severity,
    references: references,
    vulnerabilities: vulnerabilities,
    autocompleteOptions: autocompleteSuggestions,
    reference: "",
    vulnerability: "",
})

useEffect(() => { 
    setForm({
        ...form,
        title: title,
        summary: summary,
        severity: severity,
        references: references,
        type: type,
        vulnerabilities: vulnerabilities
    })
}, [title, summary, severity, references, type, vulnerabilities])

enter image description here

Мы видим, что выполняется действие Redux и состояние статьи обновляется в магазин. Я также попытался console.log в хуке, чтобы убедиться, что он работает, что он делает, но только на начальном рендере. Если я изменю initialState в срезе, то это будет отражено в форме. 

let initialState: ArticleState = {
    loading: false,
    error: null,
    article: {
        title: "",
        severity: 0,
        type: 0,
        summary: "",
        references: [],
        vulnerabilities: [],
        id: 0
    },
    articles: [] as Article[],
    autocompleteSuggestions: [] as DropdownItem[]
}

const ArticleSlice = createSlice({
    name: "articles",
    initialState,
    reducers: {
        getArticleStart: startLoading,
        getArticleFailure: loadingFailed,

        getArticleSuccess(state: ArticleState, { payload }: PayloadAction<Article>) {
            state.article = payload
            state.error = null
            state.loading = false
        }
    }
})

export const {
    getArticleFailure,
    getArticleStart,
    getArticleSuccess
} = ArticleSlice.actions

export default ArticleSlice.reducer

Как ни странно, если я сохраню код, пока на странице горячая перезагрузка делает обновите его и запустите повторную визуализацию, заполнив форму правильно.

Обратите внимание, что я использую Redux-Toolkit , отсюда и синтаксис слайса. Пожалуйста, дайте мне знать, если требуется дополнительная информация.

...