2

Предположим, что в сторе Chrome-а хранятся данные в виде: {groupList: Array(3), groupOrder: {…}}, при первом рендере приложения, я заполняю Redux state данными (за который отвечает SET_GROUP_LIST action):

import {setGroupList} from './redux/actions/groups' 

const App = () => {
    const dispatch = useDispatch()

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

reducer имеет вид:

/* global chrome */
const getGroupList = () => {
    return new Promise((resolve, reject) => {
        try {
            chrome.storage.sync.get((result) => {
            resolve(result);
        })
    }
    catch (error) {
        reject(error);
        }
    });
}

const initialState = {
    groupList: [],
}

const getGroupItems = async () => {
    const response = await getGroupList().then(data => data.groupList);
    console.log(response) // [{…}, {…}, {…}]
    return response;
}

const groups = (state = initialState, action) => {
    switch(action.type){
        case 'SET_GROUP_LIST': {
            return {
                ...state,
                groupList: getGroupItems(),
            }
        },
        default:
            return state
    }
}

из лога, который прописан в методе getGroupItems, становится ясно, что переменная response является массивом и предполагается, что и initialState.groupList вернет массив объектов. Но когд а я использую useSelector, чтобы получить этот самый список, вместо него я получаю Promise:

  const groupList = useSelector(({groups}) => groups.groupList)

  useEffect(() => {
      console.log(groupList) // Promise {<fulfilled>: Array(3)}
  }, [])

Для меня эта логика не совсем очевидна, почему в groupList я помещаю массив, а если обращаюсь к нему с помощью useSelector-a, то получаю Promise? И как я могу это исправить?

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.