在Angular @ngrx/store中,dispatch方法将一个对象属性与它自身连接起来的解决方法如下所示:
import { Store } from '@ngrx/store';
import { createAction } from '@ngrx/store';
// 创建一个action类型
export const updateData = createAction('[Data] Update Data', (data: any) => ({ data }));
constructor(private store: Store) { }
// 在组件的某个方法中调用dispatch方法
this.store.dispatch(updateData({ data: yourData }));
import { createReducer, on } from '@ngrx/store';
// 初始状态
const initialState: any = {
data: null
};
// 创建reducer
export const dataReducer = createReducer(
initialState,
on(updateData, (state, { data }) => {
return { ...state, data: data };
})
);
import { StoreModule } from '@ngrx/store';
import { dataReducer } from './reducers/data.reducer';
@NgModule({
imports: [
StoreModule.forRoot({ data: dataReducer })
]
})
export class AppModule { }
以上步骤将确保在使用dispatch方法将数据发送到store时,store中的data将会被更新为新的值。