调度动作后如何从对应的道具中获取新状态

Question

大家好，

我才刚开始使用React Redux，并且正在开发一个简单的Crud应用程序。

我正在为通过组件defs = [...defs, cells]中的映射道具获取商店的当前状态而苦苦挣扎。

在下面的代码中，我有一个动作创建者来处理三个阶段的发布请求

• 发布请求
• 发布请求成功
• 发布请求失败

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

它工作正常，我可以立即获取商店的当前状态。

截屏1

但是当我在组件（App.js）中分派动作时

const client ={
    "firstName":"adam",
    "lastName":"ben",
    "email":"adam@ben.com",
    "phone":"7939909838720"
  };

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

获取先前动作状态值（客户端的空数组）。

截屏2

但是当我将商店传递到const client ={ "firstName":"adam", "lastName":"ben", "email":"adam@ben.com", "phone":"7939909838720" }; const dispatch =useDispatch(); const ClickBtn=()=>{ console.log('before Dispatching:',state) dispatch(postClient(client)).then(()=>{ console.log('after Dispatching:',state) }); } 并退出App.js时，我得到了商店的最新状态。

store.state

截屏3

我的问题是，在调度动作之后如何从映射的道具中获得lastess状态

这是我的代码

文件 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()) }); } ，

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

Answer 1

您需要从存储状态返回所需的值

const mapStateToProps = state => {
  return {
    // you named this property as `clients` in combineReducers
    clients: state.clients
  }
}

然后它们将在组件的道具中可用。组件将侦听redux状态更改并自动更新道具。

//App.js
function App({ state, props }) {
console.log(props.clients)

此外，您可以通过prop对象而不是直接访问作为prop传递给组件的值。

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


//App.js
function App({ state, props }) {
console.log(props.store)