Как я могу получить новое состояние из сопоставленных реквизитов после отправки действия

Привет, ребята,

Я только начинаю работать с React Redux и работаю над простым грубым приложением.

Я борюсь с проблемой получения текущего состояния хранилища с помощью сопоставленных реквизитов в компоненте mapStateToProps .

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

• Почтовый запрос
• Отправка запроса выполнена успешно
• Почтовый запрос не выполнен

const postClientRequest = (client) => dispatch => {
    dispatch({
        type: clientConstant.POST_CLIENTS.REQUEST,
    })
    return axios.post('http://localhost:5000/client', client)
}

const postClientSuccess = (client) => dispatch => {
    return dispatch({
        type: clientConstant.POST_CLIENTS.SUCCESS,
        payload: client
    })
}

const postClientFailure = (error) => dispatch => {
    return dispatch({
        type: clientConstant.POST_CLIENTS.FAILURE,
        payload: error
    })
}

// action creator contains all the actions for post request
export const postClient = client => dispatch => {

    return dispatch(postClientRequest(client)).then(res => {
        const client = res.data;
        dispatch(postClientSuccess(client));
    }).catch(err => {
        dispatch(postClientFailure(err.message))
    })
}

когда я отправляю действие в свой index.js файл

const client ={
    "firstName":"adam",
    "lastName":"ben",
    "email":"[email protected]",
    "phone":"7939909838720"
  };

store.dispatch(postClient(client)).then(()=>{
    console.log('Get State : ',store.getState())
})

Он отлично работает, и я могу сразу получить текущее состояние магазина.

Скриншот 1

но когда я отправляю действие в компонент (App.js)

const client ={
    "firstName":"adam",
    "lastName":"ben",
    "email":"[email protected]",
    "phone":"7939909838720"
  };
  const dispatch =useDispatch();

  const ClickBtn=()=>{
    console.log('before Dispatching:',state)
    dispatch(postClient(client)).then(()=>{
      console.log('after Dispatching:',state)
    });
  }

Получить предыдущие значения состояния действия (пустой массив клиентов).

Скриншот 2

Но когда я передаю магазин App.js и вывожу консоль store.state, я получаю последнее состояние магазина.

 const ClickBtn=()=>{
    console.log('get State from component before Dispatching :',store.getStat())
    console.log('before Dispatching:',state)
    dispatch(postClient(client)).then(()=>{
      console.log('after Dispatching:',state)
      console.log('get State from component after Dispatching :',store.getStat())
    });
  }

Скриншот 3

Мой вопрос: как я могу получить последнее состояние из сопоставленных реквизитов после отправки действия

Вот мой код

файл client.reducer.js,

const initaileState={
    clients:[],
    loading:true,
    error:""
}
const ClientReducer=(state=initaileState,action)=>{
    switch (action.type) {
        case clientConstant.POST_CLIENTS.REQUEST:
            return {
                ...state,
                error:'',
                loading: true
            }
        case clientConstant.POST_CLIENTS.SUCCESS:
            return {
                ...state,
                clients: [...state.clients,action.payload],
                error:'',
                loading: false
            }
        case clientConstant.POST_CLIENTS.FAILURE:
            return {
                ...state,
                error:action.payload,
                loading: false
            }
        default:
            return state
    }
}

файл client.action.js,

const postClientRequest = (client)=>dispatch => {
     dispatch({
        type: clientConstant.POST_CLIENTS.REQUEST,
    })
    return axios.post('http://localhost:5000/client', client)
}

const postClientSuccess = (client) =>dispatch =>{
    return dispatch({
        type: clientConstant.POST_CLIENTS.SUCCESS,
        payload: client
    })
}

const postClientFailure = (error) =>dispatch =>{
    return dispatch({
        type: clientConstant.POST_CLIENTS.FAILURE,
        payload: error
    })
}

export const postClient = client => dispatch => {

    return dispatch(postClientRequest(client)).then(res => {
        const client = res.data;
        dispatch(postClientSuccess(client));
    }).catch(err => {
        dispatch(postClientFailure(err.message))
    })
}

файл index.js

const store = createStore(combineReducers({clients:ClientReducer}), composeEnhancers(

    applyMiddleware(thunk,Logger)
));
console.log('Get State  before dispatching : ',store.getState());
store.dispatch(postClient(client)).then(()=>{
    console.log('Get State  after dispatching : ',store.getState());
})

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

//App.js
function App({state,store}) {
  const client ={
    "firstName":"adam",
    "lastName":"ben",
    "email":"[email protected]",
    "phone":"7939909838720"
  };
  const dispatch =useDispatch();

  const ClickBtn=()=>{
    console.log('get State from component before Dispatching :',store.getStat())
    console.log('before Dispatching:',state)
    dispatch(postClient(client)).then(()=>{
      console.log('after Dispatching:',state)
      console.log('get State from component after Dispatching :',store.getStat())
    });
  }
  return (
    <div className="App">
      <header className="App-header">
       <button  onClick={ClickBtn}>Dispatch </button>
      </header>
    </div>
  );
}

const mapStateToProps=state=>{
  return {state}
}

export default connect(mapStateToProps)(App);