reduxストアのデータでコンポーネントを更新するにはどうすればよいですか？
エドワードベラ
reduxをアプリに正常に統合しました。データベースに送信するフォームからデータをフェッチしていて、eventListener（redux-saga）を使用して、データをストアに更新しています。
Redux DevToolsを使用すると、ストアにデータが表示されますが、コンポーネントにデータが表示されません。私はreact-reduxのuseSelectorフックを使用しています。
私のコンポーネント：
export const DisplayUser = () => {
const { db } = useSelector(state => state.data.db);
var count = 0;
return (
<Table striped bordered hover>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Age</th>
<th>Birthday</th>
<th>Hobby</th>
</tr>
</thead>
<tbody>
{db ? (
db.map(data => {
return (
<tr key={count++}>
<td>{data.fname}</td>
<td>{data.lname}</td>
<td>{data.email}</td>
<td>{data.age}</td>
<td>{data.birth}</td>
<td>{data.hobby}</td>
</tr>
);
})
) : (
<p>Please fill the form</p>
)}
</tbody>
</Table>
);
};
そして、これが私のアプリのスクリーンショットです。 
これは最近提出された入力を含む私のreduxストアのスクリーンショットです： 
これが私のレデューサーのコードです：
import {
SAVE_FORM,
UPDATE_STORE
} from "../actions/types";
const initialState = {
sent: [],
db: ""
};
export default function (state = initialState, action) {
switch (action.type) {
case SAVE_FORM:
return {
...state,
sent: [action.payload]
};
case UPDATE_STORE:
return {
db: [action.payload]
};
default:
return state;
}
}
サワー
dbセレクターの結果から構造を解除する必要はありません。あなたはすでにdbキーまで選択しています。セレクターを次のように更新します。
const db = useSelector(state => state.data.db);
そして、あなたは行ってもいいはずです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
あるコンポーネントから別のコンポーネントにreduxストアを渡すにはどうすればよいですか？
- 2
Reduxを使用してコンポーネントの1つのインスタンスのみを更新するにはどうすればよいですか？
- 3
Angular 5のコンポーネント間のデータをリアルタイムで更新するにはどうすればよいですか？
- 4
`redux`ベースのコンポーネントで複数のインスタンスを作成するにはどうすればよいですか？
- 5
vueコンポーネントのvuexストアを介してデータを自動的に変更するにはどうすればよいですか？
- 6
React / Redux-ReactコンポーネントのReduxストアから値を表示するにはどうすればよいですか？
- 7
React-Redux-子コンポーネントからアクションをディスパッチするにはどうすればよいですか？
- 8
nuxtを使用してコンポーネントのHEADデータにアクセスするにはどうすればよいですか？
- 9
コンポーネントの状態を保存してreduxストアにサブスクライブするにはどうすればよいですか？
- 10
vueコンポーネントからvuexストアにオブジェクトデータを送信するにはどうすればよいですか？
- 11
コンポーネントの値をストア値からリアクティブに更新するにはどうすればよいですか？
- 12
Jest：子コンポーネントのみにReduxモックストアを提供するにはどうすればよいですか？
- 13
Relay Modernの親コンポーネントでQueryRendererからデータに最適にアクセスするにはどうすればよいですか？
- 14
EmberJSの内部コンポーネントからモデルデータを更新するにはどうすればよいですか？
- 15
反応スタイルのコンポーネントでカスタムアイコンを使用するにはどうすればよいですか？
- 16
小道具を介して親から送信した子コンポーネントのデータを更新するにはどうすればよいですか
- 17
カスタムコンポーネントのデータにアクセスするにはどうすればよいですか？
- 18
Reactコンポーネントの状態を更新するにはどうすればよいですか？
- 19
Angularで親コンポーネントから子コンポーネントにデータを取得するにはどうすればよいですか？
- 20
ReactコンポーネントのReduxストアに適切にアクセスするにはどうすればよいですか？
- 21
vueでコンポーネントから別のコンポーネントにデータを渡すにはどうすればよいですか？
- 22
vueコンポーネントの子コンポーネントをクリックしたときに、親コンポーネントのデータを更新するにはどうすればよいですか？
- 23
モデルにEmberコンポーネントベースのデータのtagNameを設定するにはどうすればよいですか？
- 24
putメソッドを使用してvueコンポーネントのデータを更新するにはどうすればよいですか？
- 25
ReactとReduxでコンポーネントを再利用するにはどうすればよいですか？
- 26
ReactとReduxでコンポーネントを再利用するにはどうすればよいですか？
- 27
redux接続コンポーネントでtypescriptを使用するにはどうすればよいですか？
- 28
リストアイテムの削除時にVueコンポーネントを更新するにはどうすればよいですか？
- 29
コンポーネントの参照にアクセスするにはどうすればよいですか？
コメントを追加