Моя сага о редуксе печатает неопределенное состояние с помощью useSelector - PullRequest
Новая
       0

Моя сага о редуксе печатает неопределенное состояние с помощью useSelector

0 голосов
/ 02 марта 2020

У меня есть эта сага, которая делает http-запрос и отправляет сообщение в редукторе: 

// worker Saga: will be fired on GET_FILIAIS_REQUEST actions
function* fetchFiliais(action) {
    try {
        const data = yield call(LoginServices.fetchFiliaisApi);
        yield put(allActions.loginActions.receiveFilialData(data));
    } catch (e) {
        yield put({type: 'FETCH_FILIAIS_FAILED', message: e.message})
    }
}

/*
  Starts fetchFiliais on each dispatched `GET_FILIAIS_REQUEST` action.
*/

export default function* loginSaga() {
    yield takeEvery("GET_FILIAIS_REQUEST", fetchFiliais);
}

В моем компоненте входа в систему я называю эту сагу: 

const Login = props => {
  const dispatch = useDispatch()
  const filiais = useSelector(state => state.filiais)
  useEffect(() => {
    dispatch({type: 'GET_FILIAIS_REQUEST'})
    setTimeout(function(){ console.log(filiais); }, 5000);
  }, [dispatch, filiais])

Это мой редуктор: в моем console.log () печатает правильный тип и полезную нагрузку, и печатает «введите правильный регистр»: 

const currentUser = (state = {}, action) => {
    console.log(action.type)
    console.log(action.payload)

    switch(action.type){
        case "SET_USER":
            return {
                ...state,
                user: action.payload,
                loggedIn: true
            }
        case "LOG_OUT":
            return {
                ...state,
                user: {},
                loggedIn: false
            }
        case "RECEIVE_FILIAL_DATA":
            console.log('enter correct case')
            return {
                ...state,
                filiais: action.payload
            }
        default:
            return state
    }

Но я помещаю один setTimeOut в console.log переменную filiais, и это значение не определено. Почему?

Это мой индекс. js: 

import loginSaga from './pages/login/login-form/saga'

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()

const store = createStore(
    rootReducer,
    applyMiddleware(sagaMiddleware)
)

// then run the saga
sagaMiddleware.run(loginSaga)

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <Route path="/" component={App} />
        </Router>
    </Provider>, document.getElementById('root'));

Это мой root редуктор: 

import currentUser from './login'
import { combineReducers } from 'redux'

const rootReducer = combineReducers({
    currentUser
})

export default rootReducer

1 Ответ

2 голосов
/ 02 марта 2020

Но я положил один setTimeOut в console.log переменную filiais, и это значение не определено. Почему?

Поскольку filiais является локальной переменной const. Невозможно изменить значение const, и это не то, что пытается сделать диспетчерское действие в любом случае.

Отправляя действие, вы, в конечном счете, инструктируете компонент для повторного рендеринга. При повторном рендеринге будет создана новая локальная переменная, которой будет присвоено новое значение. Если вы хотите записать новое значение, поместите оператор log в тело компонента. 

const filiais = useSelector(state => state.filiais)
console.log(filiais);
useEffect(() => {
  dispatch({type: 'GET_FILIAIS_REQUEST'});
}, [dispatch])
...