Наполнение начального состояния в реале

Question

Я новичок в реактиве и довольно смущен, должен сказать, таким образом, вопрос. Я создаю первую итерацию моего приложения, получая данные внутри моих компонентов root/container. Вот контейнер

class HomePage extends React.Component{ 

    constructor(props) { 
    super(props); 
    this.state = {user: null}; 

    } 
    componentWillMount() { 

    getUserData(xobni_api).then((result) =>{ 
     this.setState({user : result}); 

    }); 


    render(){ 
    return(

     {this.state.user && 
     <div className="col-md-8 middle-pane"> 
      <Viewer images={this.state.user} /> 
     </div> 
     } 

    ); 
    } 

} 

Это функция getUserData,

export function getUserData(url){ 

    return fetch(url, { credentials : 'include'}) 
       .then((response) => { return response.json();}) 
       .then((data) =>{ return new User(data.public_id, data.yahoo_profile.givenName, data.yahoo_profile.familyName, data.credentials[0].account);}); 
} 

Сейчас я нахожусь в процессе реструктуризации моего приложения и хочу, чтобы получить управление данными с помощью Redux. Вот мой condifgureStore

export default function configureStore(initialState){ 
    return createStore(
    rootReducer, 
    initialState, 
    applyMiddleware(reduxImmutableStateInvariant()) 
); 
} 

И я инстанцировании магазин в моем index.js

const store = configureStore(initialState); 

А потом мне нужно передать это состояние в моих индивидуальных фотоуменьшители, как этот.

export default function homePageReducer(state, action){ 
    switch(action.type){ 
    case 'SEND_IMAGE': 
     //send image 

    default: 
     return state; 
    } 
} 

Как представляется, я не могу найти правильный путь. Я был бы очень признателен, если кто-то может помочь с небольшим подробным ответом относительно того, как я могу переместить вызов api из моего компонента, сделать вызов в магазине, установить начальное состояние и затем передать его обратно компоненту. Спасибо заранее.

Answer 1

Одна из концепций Redux, что я вбил в моей голове:

диспетчерские действия не обновлять магазин, независимо от того, что (выборка данных, вызов хром API, и т.д.)

Давайте опробовать эту концепцию в вашем случае:

fetch(url, { credentials : 'include'}) 
    .then((response) => { return response.json();}) 
    .then((data) => { 
    // create a new user 
    const newUser = new User(data.public_id, data.yahoo_profile.givenName, data.yahoo_profile.familyName, data.credentials[0].account); 

    // once you have the new user. 
    // time to update the store. 
    dispatch({ 
     type: 'UPDATE_STORE_WITH_NEW_USER' 
     payload: { 
     user: newUser, 
     }, 
    }); 
    }); 

следующий вопрос, каким образом вы получаете функцию dispatch. Один из способов - импортировать экземпляр хранилища и вызвать функцию отправки следующим образом:

import store from 'path/to/store'; 

store.dispatch({ type: 'ACTION_TO_BE_DISPATCHED' }); 

Плохо. Теперь вам нужно импортировать хранилище каждый раз, когда вам нужно отправить действие.

Представляем redux-thunk !! См. here, чтобы понять, зачем вам это нужно. С redux-thunk, вы можете создавать действия, как это:

fetchAndUpdateStore() { 
    // notice that this returns a function 
    return (dispatch) => { 
    fetch(url, { credentials : 'include'}) 
     .then((response) => { return response.json();}) 
     .then((data) => { 
     // create a new user 
     const newUser = new User(data.public_id, data.yahoo_profile.givenName, data.yahoo_profile.familyName, data.credentials[0].account); 

     // now you can dispatch function easily. 
     dispatch({ 
      type: 'UPDATE_STORE_WITH_NEW_USER' 
      payload: { 
      user: newUser, 
      }, 
     }); 
     }); 
    } 
} 

вместо простых базовых действий, как это:

someBasicAction =() => ({ 
    type: 'BASIC_ACTION', 
}); 

Теперь, последняя часть должна направить действия и подключить компонент к данным в магазин.

import { connect } from 'react-redux'; 
import fetchAndUpdateStore from 'path/to/that/action'; 

const mapStateToProps = (state) => ({ 
    user: state.user, 
}); 

const mapDispatchToProps = (dispatch) => ({ 
    fetchThenUpdate:() => (
    dispatch(fetchAndUpdateStore()) 
), 
}); 

connect(mapStateToProps, mapDispatchToProps)(YourComponent); 

Наконец, в компоненте, вы можете вызвать this.props.fetchThenUpdate.

Answer 2

Я оставил бы вызов API в компоненте и отправил бы действие, когда вызов будет завершен. При этом у вас нет побочных эффектов в configureStore и может дать пользователю обратную связь о текущем ходе (например, показывая загрузчик)