タグ付けされた質問 「react-redux」

私はおそらく非常に明白な何かを見逃しているので、自分自身をクリアしたいと思います。 これが私の理解です。 ナイーブなreactコンポーネントには、states＆がありpropsます。で更新すると、コンポーネント全体stateがsetState再レンダリングされます。propsほとんどが読み取り専用であり、更新しても意味がありません。 のようなものを介してreduxストアにサブスクライブするreactコンポーネントでstore.subscribe(render)は、ストアが更新されるたびに明らかに再レンダリングされます。 react-reduxにはconnect()、状態ツリーの一部（コンポーネントに関係する）とactionCreatorsをコンポーネントに関して挿入するヘルパーがpropsあります。 const TodoListComponent = connect( mapStateToProps, mapDispatchToProps )(TodoList) しかし、ことを理解した上でsetState必要不可欠であるTodoListComponentReduxの状態ツリーの変更（再描画）に反応するように、私はすべてを見つけることができないstateかsetStateで関連するコードTodoListコンポーネントファイルを。これは次のようになります。 const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} /> )} </ul> ) 誰かが私が欠けているものに関して正しい方向に私を向けることができますか？ PS私はreduxパッケージにバンドルされているtodoリストの例に従っています。

86 reactjs  redux  react-redux 

GitHubリポジトリからクローンを作成したばかりのReduxアプリケーションを起動しようとしています。 次のコマンドで実行してみました npm start このエラーが発生します > react-redux@1.0.0 start /home/workspace/assignment > webpack-dev-server --config ./configs/webpack/webpack.config.development.js sh: 1: webpack-dev-server: not found npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! react-redux@1.0.0 start: `webpack-dev-server --config ./configs/webpack/webpack.config.development.js` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed …

85 javascript  reactjs  npm  redux  react-redux 

reactjsルーターからLinkコンポーネントを使用していますが、onClickeventを機能させることができません。これはコードです： <Link to={this.props.myroute} onClick='hello()'>Here</Link> これはそれを行う方法ですか、それとも別の方法ですか？

84 reactjs  react-router  react-redux 

reduxとの非同期を学ぶための簡単なアプリを作っているだけです。すべてが機能するようになりました。今は、実際の状態をWebページに表示したいだけです。では、renderメソッドで実際にストアの状態にアクセスするにはどうすればよいですか？ これが私のコードです（私は学習しているだけなので、すべてが1ページにあります）： const initialState = { fetching: false, fetched: false, items: [], error: null } const reducer = (state=initialState, action) => { switch (action.type) { case "REQUEST_PENDING": { return {...state, fetching: true}; } case "REQUEST_FULFILLED": { return { ...state, fetching: false, fetched: true, items: action.payload } } case "REQUEST_REJECTED": { …

83 javascript  asynchronous  reactjs  redux  react-redux 

React NativeNavigatorコンポーネント内に作成されたreact-reduxコンテナコンポーネントがあります。ナビゲーターを小道具としてこのコンテナーコンポーネントに渡して、プレゼンテーションコンポーネント内でボタンを押した後、オブジェクトをナビゲータースタックにプッシュできるようにしたいと思います。 私は、react-reduxコンテナコンポーネントが提供するすべての定型コードを手書きする必要なしにこれを実行したいと思います（また、react-reduxがここでも提供するすべての最適化を見逃さないでください）。 コンテナコンポーネントコードの例： const mapStateToProps = (state) => { return { prop1: state.prop1, prop2: state.prop2 } } const mapDispatchToProps = (dispatch) => { return { onSearchPressed: (e) => { dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator } } } const SearchViewContainer = connect( mapStateToProps, …

82 reactjs  react-native  redux  react-redux 

create-react-appcliを使用して新しいreactアプリケーションを作成しました。次に、'react-redux'を使用してライブラリを追加しましたnpm install --save react-redux。 でpackage.json、私があります。 "react-redux": "^4.4.5" 残念ながら、アプリはコンパイルされず、次のように文句を言います。 Error in ./~/react-redux/lib/utils/wrapActionCreators.js Module not found: 'redux' in C:\Users\Salman\Desktop\Courses\Internship\React\Youtube-Front-End\node_modules\react-redux\lib\utils @ ./~/react-redux/lib/utils/wrapActionCreators.js 6:13-29 どういう意味かわかりません。 完全なコンテナは次のとおりです。 import React,{Component} from 'react'; import {connect} from 'react-redux'; class BookList extends Component{ renderList(){ return this.props.books.map((book)=>{ <li key={book.title} >{book.title}</li> }); } render(){ return( <div> <ul> {this.renderList()} </ul> </div> ); …

82 reactjs  react-redux 

store.jsファイルがあります import { createStore, combineReducers } from "redux"; import reducerADD from "../reducer/reducerADD" export const store = createStore(combineReducers({ reducerADD})); でフォーマットを変更するとstore.tsx、エラーが発生します。 No overload matches this call. Overload 1 of 2, '(reducers: ReducersMapObject<{ reducerADD: { lastName: string; firstName: string; password: string; email: string; }[]; }, any>): Reducer<{ reducerADD: { lastName: string; firstName: string; …

12 typescript  react-redux 

useEffectフックの詳細を理解しようとしています。 どの方法をいつ使用するのか、なぜ知りたいのですか？ 1.useEffect with no second paraments useEffect(()=>{}) 2.useEffect with second paraments as [] useEffect(()=>{},[]) 3.useEffect with some arguments passed in the second parameter useEffect(()=>{},[arg])

10 javascript  reactjs  react-redux 

React-Reduxの新機能を使用するように新しいreact-reduxアプリケーションを構成しようとしています。公式ドキュメントは言います React Reduxは現在、既存のconnect（）高次コンポーネントの代わりとして一連のフックAPIを提供しています。 私はいくつかの実際の例でHooks APIに関連するいくつかのヘルプ記事を見つけようとしましたが、すべてのreact-reduxアプリは接続機能を使用しています。公式ドキュメントにも非常に基本的な例が示されています。 アプリの接続機能をuseSelector（Hooks APIによって提供される）で変更したい。 これが私のアプリケーションのコードスニペットの例です。 //MessagesListContainer export default connect( // mapStateToProps (state:State) => ({ activeUser: getActiveUser(state), messages: getMessagesList(state), }) )(MessagesList) //Selectors export const getActiveUser = (state: State) => state.activeUser; export const getMessagesList = (state : State) => ( Object.keys(state.messages).map((key : any)=> state.messages[key]) ) export interface IMessagesListProps { …

9 reactjs  typescript  redux  react-redux